上传代码
This commit is contained in:
@ -0,0 +1,199 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
@media screen and (max-width: 500px) {
|
||||
.hide-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.uni-stat__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.uni-stat-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.uni-stat__actived {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.uni-label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #6a6a6a;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.uni-select {
|
||||
font-size: 14px;
|
||||
border: 1px solid #e5e5e5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px #e5e5e5;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
}
|
||||
.uni-select--disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.uni-select__label {
|
||||
font-size: 16px;
|
||||
height: 35px;
|
||||
padding-right: 10px;
|
||||
color: #909399;
|
||||
}
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.uni-select__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.uni-select__input-plac {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
.uni-select__selector {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.uni-select__selector-scroll {
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.uni-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.uni-select__selector-empty:last-child,
|
||||
.uni-select__selector-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.uni-select__selector__disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* picker 弹出层通用的指示小三角 */
|
||||
.uni-popper__arrow_bottom,
|
||||
.uni-popper__arrow_bottom::after,
|
||||
.uni-popper__arrow_top,
|
||||
.uni-popper__arrow_top::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
.uni-popper__arrow_bottom {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
.uni-popper__arrow_bottom::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.uni-popper__arrow_top {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
bottom: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #EBEEF5;
|
||||
}
|
||||
.uni-popper__arrow_top::after {
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -6px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.uni-select__input-text {
|
||||
width: 100%;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.uni-select__input-placeholder {
|
||||
color: #6a6a6a;
|
||||
font-size: 12px;
|
||||
}
|
||||
.uni-select--mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view class="uni-stat__select"><label a:if="{{a}}" class="uni-label-text hide-on-phone">{{b}}</label><view class="{{('uni-stat-box') + ' ' + (t && 'uni-stat__actived')}}"><view class="{{('uni-select') + ' ' + (s && 'uni-select--disabled')}}"><view class="uni-select__input-box" onTap="{{j}}"><view a:if="{{c}}" class="uni-select__input-text">{{d}}</view><view a:else class="uni-select__input-text uni-select__input-placeholder">{{e}}</view><view a:if="{{f}}" catchTap="{{h}}"><uni-icons u-i="dce84b52-0" onVI="__l" u-p="{{g||''}}"/></view><view a:else><uni-icons u-i="dce84b52-1" onVI="__l" u-p="{{i||''}}"/></view></view><view a:if="{{k}}" class="uni-select--mask" onTap="{{l}}"/><view a:if="{{m}}" class="uni-select__selector" style="{{r}}"><view class="{{n}}"></view><scroll-view scroll-y="true" class="uni-select__selector-scroll"><view a:if="{{o}}" class="uni-select__selector-empty"><text>{{p}}</text></view><block a:else><view a:for="{{q}}" a:for-item="item" a:key="c" class="uni-select__selector-item" onTap="{{item.d}}"><text class="{{(item.b && 'uni-select__selector__disabled')}}">{{item.a}}</text></view></block></scroll-view></view></view></view></view>
|
||||
@ -0,0 +1,318 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uni-data-select",
|
||||
mixins: [common_vendor.Zs.mixinDatacom || {}],
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请选择"
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: "无选项"
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defItem: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||
format: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: "bottom"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
current: "",
|
||||
mixinDatacomResData: [],
|
||||
apps: [],
|
||||
channels: [],
|
||||
cacheKey: "uni-data-select-lastSelectedValue"
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.debounceGet = this.debounce(() => {
|
||||
this.query();
|
||||
}, 300);
|
||||
if (this.collection && !this.localdata.length) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typePlaceholder() {
|
||||
const text = {
|
||||
"opendb-stat-app-versions": "版本",
|
||||
"opendb-app-channels": "渠道",
|
||||
"opendb-app-list": "应用"
|
||||
};
|
||||
const common = this.placeholder;
|
||||
const placeholder = text[this.collection];
|
||||
return placeholder ? common + placeholder : common;
|
||||
},
|
||||
valueCom() {
|
||||
return this.modelValue;
|
||||
},
|
||||
textShow() {
|
||||
let text = this.current;
|
||||
if (text.length > 10) {
|
||||
return text.slice(0, 25) + "...";
|
||||
}
|
||||
return text;
|
||||
},
|
||||
getOffsetByPlacement() {
|
||||
switch (this.placement) {
|
||||
case "top":
|
||||
return "bottom:calc(100% + 12px);";
|
||||
case "bottom":
|
||||
return "top:calc(100% + 12px);";
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
if (Array.isArray(val) && old !== val) {
|
||||
this.mixinDatacomResData = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
valueCom(val, old) {
|
||||
this.initDefVal();
|
||||
},
|
||||
mixinDatacomResData: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val.length) {
|
||||
this.initDefVal();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
debounce(fn, time = 100) {
|
||||
let timer = null;
|
||||
return function(...args) {
|
||||
if (timer)
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
}, time);
|
||||
};
|
||||
},
|
||||
// 执行数据库查询
|
||||
query() {
|
||||
this.mixinDatacomEasyGet();
|
||||
},
|
||||
// 监听查询条件变更事件
|
||||
onMixinDatacomPropsChange() {
|
||||
if (this.collection) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
initDefVal() {
|
||||
let defValue = "";
|
||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||
defValue = this.valueCom;
|
||||
} else {
|
||||
let strogeValue;
|
||||
if (this.collection) {
|
||||
strogeValue = this.getCache();
|
||||
}
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue;
|
||||
} else {
|
||||
let defItem = "";
|
||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value;
|
||||
}
|
||||
defValue = defItem;
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue);
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find((item) => item.value === defValue);
|
||||
this.current = def ? this.formatItemName(def) : "";
|
||||
},
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
this.mixinDatacomResData.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable;
|
||||
}
|
||||
});
|
||||
return isDisabled;
|
||||
},
|
||||
clearVal() {
|
||||
this.emit("");
|
||||
if (this.collection) {
|
||||
this.removeCache();
|
||||
}
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false;
|
||||
this.current = this.formatItemName(item);
|
||||
this.emit(item.value);
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
this.$emit("input", val);
|
||||
this.$emit("update:modelValue", val);
|
||||
this.$emit("change", val);
|
||||
if (this.collection) {
|
||||
this.setCache(val);
|
||||
}
|
||||
},
|
||||
toggleSelector() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
this.showSelector = !this.showSelector;
|
||||
},
|
||||
formatItemName(item) {
|
||||
let {
|
||||
text,
|
||||
value,
|
||||
channel_code
|
||||
} = item;
|
||||
channel_code = channel_code ? `(${channel_code})` : "";
|
||||
if (this.format) {
|
||||
let str = "";
|
||||
str = this.format;
|
||||
for (let key in item) {
|
||||
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
return this.collection.indexOf("app-list") > 0 ? `${text}(${value})` : text ? text : `未命名${channel_code}`;
|
||||
}
|
||||
},
|
||||
// 获取当前加载的数据
|
||||
getLoadData() {
|
||||
return this.mixinDatacomResData;
|
||||
},
|
||||
// 获取当前缓存key
|
||||
getCurrentCacheKey() {
|
||||
return this.collection;
|
||||
},
|
||||
// 获取缓存
|
||||
getCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = common_vendor.index.getStorageSync(this.cacheKey) || {};
|
||||
return cacheData[name];
|
||||
},
|
||||
// 设置缓存
|
||||
setCache(value, name = this.getCurrentCacheKey()) {
|
||||
let cacheData = common_vendor.index.getStorageSync(this.cacheKey) || {};
|
||||
cacheData[name] = value;
|
||||
common_vendor.index.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
// 删除缓存
|
||||
removeCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = common_vendor.index.getStorageSync(this.cacheKey) || {};
|
||||
delete cacheData[name];
|
||||
common_vendor.index.setStorageSync(this.cacheKey, cacheData);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
|
||||
_easycom_uni_icons2();
|
||||
}
|
||||
const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_icons();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.label
|
||||
}, $props.label ? {
|
||||
b: common_vendor.t($props.label + "：")
|
||||
} : {}, {
|
||||
c: $data.current
|
||||
}, $data.current ? {
|
||||
d: common_vendor.t($options.textShow)
|
||||
} : {
|
||||
e: common_vendor.t($options.typePlaceholder)
|
||||
}, {
|
||||
f: $data.current && $props.clear && !$props.disabled
|
||||
}, $data.current && $props.clear && !$props.disabled ? {
|
||||
g: common_vendor.p({
|
||||
type: "clear",
|
||||
color: "#c0c4cc",
|
||||
size: "24"
|
||||
}),
|
||||
h: common_vendor.o((...args) => $options.clearVal && $options.clearVal(...args))
|
||||
} : {
|
||||
i: common_vendor.p({
|
||||
type: $data.showSelector ? "top" : "bottom",
|
||||
size: "14",
|
||||
color: "#999"
|
||||
})
|
||||
}, {
|
||||
j: common_vendor.o((...args) => $options.toggleSelector && $options.toggleSelector(...args)),
|
||||
k: $data.showSelector
|
||||
}, $data.showSelector ? {
|
||||
l: common_vendor.o((...args) => $options.toggleSelector && $options.toggleSelector(...args))
|
||||
} : {}, {
|
||||
m: $data.showSelector
|
||||
}, $data.showSelector ? common_vendor.e({
|
||||
n: common_vendor.n($props.placement == "bottom" ? "uni-popper__arrow_bottom" : "uni-popper__arrow_top"),
|
||||
o: $data.mixinDatacomResData.length === 0
|
||||
}, $data.mixinDatacomResData.length === 0 ? {
|
||||
p: common_vendor.t($props.emptyTips)
|
||||
} : {
|
||||
q: common_vendor.f($data.mixinDatacomResData, (item, index, i0) => {
|
||||
return {
|
||||
a: common_vendor.t($options.formatItemName(item)),
|
||||
b: item.disable ? 1 : "",
|
||||
c: index,
|
||||
d: common_vendor.o(($event) => $options.change(item))
|
||||
};
|
||||
})
|
||||
}, {
|
||||
r: common_vendor.s($options.getOffsetByPlacement)
|
||||
}) : {}, {
|
||||
s: $props.disabled ? 1 : "",
|
||||
t: $data.current ? 1 : ""
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"uni-icons": "../../../uni-icons/components/uni-icons/uni-icons"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const ERR_MSG_OK = "chooseAndUploadFile:ok";
|
||||
const ERR_MSG_FAIL = "chooseAndUploadFile:fail";
|
||||
function chooseImage(opts) {
|
||||
const {
|
||||
count,
|
||||
sizeType = ["original", "compressed"],
|
||||
sourceType,
|
||||
extension
|
||||
} = opts;
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.chooseImage({
|
||||
count,
|
||||
sizeType,
|
||||
sourceType,
|
||||
extension,
|
||||
success(res) {
|
||||
resolve(normalizeChooseAndUploadFileRes(res, "image"));
|
||||
},
|
||||
fail(res) {
|
||||
reject({
|
||||
errMsg: res.errMsg.replace("chooseImage:fail", ERR_MSG_FAIL)
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function chooseVideo(opts) {
|
||||
const {
|
||||
count,
|
||||
camera,
|
||||
compressed,
|
||||
maxDuration,
|
||||
sourceType,
|
||||
extension
|
||||
} = opts;
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.chooseVideo({
|
||||
camera,
|
||||
compressed,
|
||||
maxDuration,
|
||||
sourceType,
|
||||
extension,
|
||||
success(res) {
|
||||
const {
|
||||
tempFilePath,
|
||||
duration,
|
||||
size,
|
||||
height,
|
||||
width
|
||||
} = res;
|
||||
resolve(normalizeChooseAndUploadFileRes({
|
||||
errMsg: "chooseVideo:ok",
|
||||
tempFilePaths: [tempFilePath],
|
||||
tempFiles: [{
|
||||
name: res.tempFile && res.tempFile.name || "",
|
||||
path: tempFilePath,
|
||||
size,
|
||||
type: res.tempFile && res.tempFile.type || "",
|
||||
width,
|
||||
height,
|
||||
duration,
|
||||
fileType: "video",
|
||||
cloudPath: ""
|
||||
}]
|
||||
}, "video"));
|
||||
},
|
||||
fail(res) {
|
||||
reject({
|
||||
errMsg: res.errMsg.replace("chooseVideo:fail", ERR_MSG_FAIL)
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function chooseAll(opts) {
|
||||
const {
|
||||
count,
|
||||
extension
|
||||
} = opts;
|
||||
return new Promise((resolve, reject) => {
|
||||
let chooseFile = common_vendor.index.chooseFile;
|
||||
if (typeof wx !== "undefined" && typeof wx.chooseMessageFile === "function") {
|
||||
chooseFile = wx.chooseMessageFile;
|
||||
}
|
||||
if (typeof chooseFile !== "function") {
|
||||
return reject({
|
||||
errMsg: ERR_MSG_FAIL + " 请指定 type 类型，该平台仅支持选择 image 或 video。"
|
||||
});
|
||||
}
|
||||
chooseFile({
|
||||
type: "all",
|
||||
count,
|
||||
extension,
|
||||
success(res) {
|
||||
resolve(normalizeChooseAndUploadFileRes(res));
|
||||
},
|
||||
fail(res) {
|
||||
reject({
|
||||
errMsg: res.errMsg.replace("chooseFile:fail", ERR_MSG_FAIL)
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function normalizeChooseAndUploadFileRes(res, fileType) {
|
||||
res.tempFiles.forEach((item, index) => {
|
||||
if (!item.name) {
|
||||
item.name = item.path.substring(item.path.lastIndexOf("/") + 1);
|
||||
}
|
||||
if (fileType) {
|
||||
item.fileType = fileType;
|
||||
}
|
||||
item.cloudPath = Date.now() + "_" + index + item.name.substring(item.name.lastIndexOf("."));
|
||||
});
|
||||
if (!res.tempFilePaths) {
|
||||
res.tempFilePaths = res.tempFiles.map((file) => file.path);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
function uploadCloudFiles(files, max = 5, onUploadProgress) {
|
||||
files = JSON.parse(JSON.stringify(files));
|
||||
const len = files.length;
|
||||
let count = 0;
|
||||
let self = this;
|
||||
return new Promise((resolve) => {
|
||||
while (count < max) {
|
||||
next();
|
||||
}
|
||||
function next() {
|
||||
let cur = count++;
|
||||
if (cur >= len) {
|
||||
!files.find((item) => !item.url && !item.errMsg) && resolve(files);
|
||||
return;
|
||||
}
|
||||
const fileItem = files[cur];
|
||||
const index = self.files.findIndex((v) => v.uuid === fileItem.uuid);
|
||||
fileItem.url = "";
|
||||
delete fileItem.errMsg;
|
||||
common_vendor.Zs.uploadFile({
|
||||
filePath: fileItem.path,
|
||||
cloudPath: fileItem.cloudPath,
|
||||
fileType: fileItem.fileType,
|
||||
onUploadProgress: (res) => {
|
||||
res.index = index;
|
||||
onUploadProgress && onUploadProgress(res);
|
||||
}
|
||||
}).then((res) => {
|
||||
fileItem.url = res.fileID;
|
||||
fileItem.index = index;
|
||||
if (cur < len) {
|
||||
next();
|
||||
}
|
||||
}).catch((res) => {
|
||||
fileItem.errMsg = res.errMsg || res.message;
|
||||
fileItem.index = index;
|
||||
if (cur < len) {
|
||||
next();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function uploadFiles(choosePromise, {
|
||||
onChooseFile,
|
||||
onUploadProgress
|
||||
}) {
|
||||
return choosePromise.then((res) => {
|
||||
if (onChooseFile) {
|
||||
const customChooseRes = onChooseFile(res);
|
||||
if (typeof customChooseRes !== "undefined") {
|
||||
return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === "undefined" ? res : chooseRes);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}).then((res) => {
|
||||
if (res === false) {
|
||||
return {
|
||||
errMsg: ERR_MSG_OK,
|
||||
tempFilePaths: [],
|
||||
tempFiles: []
|
||||
};
|
||||
}
|
||||
return res;
|
||||
});
|
||||
}
|
||||
function chooseAndUploadFile(opts = {
|
||||
type: "all"
|
||||
}) {
|
||||
if (opts.type === "image") {
|
||||
return uploadFiles(chooseImage(opts), opts);
|
||||
} else if (opts.type === "video") {
|
||||
return uploadFiles(chooseVideo(opts), opts);
|
||||
}
|
||||
return uploadFiles(chooseAll(opts), opts);
|
||||
}
|
||||
exports.chooseAndUploadFile = chooseAndUploadFile;
|
||||
exports.uploadCloudFiles = uploadCloudFiles;
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
.uni-file-picker {
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
.uni-file-picker__header {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
.file-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.file-count {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.is-add {
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view class="uni-file-picker"><view a:if="{{a}}" class="uni-file-picker__header"><text class="file-title">{{b}}</text><text class="file-count">{{c}}/{{d}}</text></view><upload-image a:if="{{e}}" u-s="{{['d']}}" onUploadFiles="{{f}}" onChoose="{{g}}" onDelFile="{{h}}" u-i="5c62a7d7-0" onVI="__l" u-p="{{i||''}}"><slot><view class="is-add"><view class="icon-add"></view><view class="icon-add rotate"></view></view></slot></upload-image><upload-file a:if="{{j}}" u-s="{{['d']}}" onUploadFiles="{{k}}" onChoose="{{l}}" onDelFile="{{m}}" u-i="5c62a7d7-1" onVI="__l" u-p="{{n||''}}"><slot><button type="primary" size="mini">选择文件</button></slot></upload-file></view>
|
||||
@ -0,0 +1,556 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_uniFilePicker_components_uniFilePicker_chooseAndUploadFile = require("./choose-and-upload-file.js");
|
||||
const uni_modules_uniFilePicker_components_uniFilePicker_utils = require("./utils.js");
|
||||
const uploadImage = () => "./upload-image.js";
|
||||
const uploadFile = () => "./upload-file.js";
|
||||
const _sfc_main = {
|
||||
name: "uniFilePicker",
|
||||
components: {
|
||||
uploadImage,
|
||||
uploadFile
|
||||
},
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
emits: ["select", "success", "fail", "progress", "delete", "update:modelValue", "input"],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disablePreview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 自动上传
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 最大选择个数 ，h5只能限制单选或是多选
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
// 列表样式 grid | list | list-card
|
||||
mode: {
|
||||
type: String,
|
||||
default: "grid"
|
||||
},
|
||||
// 选择文件类型 image/video/all
|
||||
fileMediatype: {
|
||||
type: String,
|
||||
default: "image"
|
||||
},
|
||||
// 文件类型筛选
|
||||
fileExtname: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
listStyles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
// 是否显示边框
|
||||
border: true,
|
||||
// 是否显示分隔线
|
||||
dividline: true,
|
||||
// 线条样式
|
||||
borderStyle: {}
|
||||
};
|
||||
}
|
||||
},
|
||||
imageStyles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: "auto",
|
||||
height: "auto"
|
||||
};
|
||||
}
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
returnType: {
|
||||
type: String,
|
||||
default: "array"
|
||||
},
|
||||
sizeType: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["original", "compressed"];
|
||||
}
|
||||
},
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["album", "camera"];
|
||||
}
|
||||
},
|
||||
provider: {
|
||||
type: String,
|
||||
default: ""
|
||||
// 默认上传到 unicloud 内置存储 extStorage 扩展存储
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
localValue: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal, oldVal) {
|
||||
this.setValue(newVal, oldVal);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
modelValue: {
|
||||
handler(newVal, oldVal) {
|
||||
this.setValue(newVal, oldVal);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filesList() {
|
||||
let files = [];
|
||||
this.files.forEach((v) => {
|
||||
files.push(v);
|
||||
});
|
||||
return files;
|
||||
},
|
||||
showType() {
|
||||
if (this.fileMediatype === "image") {
|
||||
return this.mode;
|
||||
}
|
||||
return "list";
|
||||
},
|
||||
limitLength() {
|
||||
if (this.returnType === "object") {
|
||||
return 1;
|
||||
}
|
||||
if (!this.limit) {
|
||||
return 1;
|
||||
}
|
||||
if (this.limit >= 9) {
|
||||
return 9;
|
||||
}
|
||||
return this.limit;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!(common_vendor.Zs.config && common_vendor.Zs.config.provider)) {
|
||||
this.noSpace = true;
|
||||
common_vendor.Zs.chooseAndUploadFile = uni_modules_uniFilePicker_components_uniFilePicker_chooseAndUploadFile.chooseAndUploadFile;
|
||||
}
|
||||
this.form = this.getForm("uniForms");
|
||||
this.formItem = this.getForm("uniFormsItem");
|
||||
if (this.form && this.formItem) {
|
||||
if (this.formItem.name) {
|
||||
this.rename = this.formItem.name;
|
||||
this.form.inputChildrens.push(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 公开用户使用，清空文件
|
||||
* @param {Object} index
|
||||
*/
|
||||
clearFiles(index) {
|
||||
if (index !== 0 && !index) {
|
||||
this.files = [];
|
||||
this.$nextTick(() => {
|
||||
this.setEmit();
|
||||
});
|
||||
} else {
|
||||
this.files.splice(index, 1);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.setEmit();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 公开用户使用，继续上传
|
||||
*/
|
||||
upload() {
|
||||
let files = [];
|
||||
this.files.forEach((v, index) => {
|
||||
if (v.status === "ready" || v.status === "error") {
|
||||
files.push(Object.assign({}, v));
|
||||
}
|
||||
});
|
||||
return this.uploadFiles(files);
|
||||
},
|
||||
async setValue(newVal, oldVal) {
|
||||
const newData = async (v) => {
|
||||
const reg = /cloud:\/\/([\w.]+\/?)\S*/;
|
||||
let url = "";
|
||||
if (v.fileID) {
|
||||
url = v.fileID;
|
||||
} else {
|
||||
url = v.url;
|
||||
}
|
||||
if (reg.test(url)) {
|
||||
v.fileID = url;
|
||||
v.url = await this.getTempFileURL(url);
|
||||
}
|
||||
if (v.url)
|
||||
v.path = v.url;
|
||||
return v;
|
||||
};
|
||||
if (this.returnType === "object") {
|
||||
if (newVal) {
|
||||
await newData(newVal);
|
||||
} else {
|
||||
newVal = {};
|
||||
}
|
||||
} else {
|
||||
if (!newVal)
|
||||
newVal = [];
|
||||
for (let i = 0; i < newVal.length; i++) {
|
||||
let v = newVal[i];
|
||||
await newData(v);
|
||||
}
|
||||
}
|
||||
this.localValue = newVal;
|
||||
if (this.form && this.formItem && !this.is_reset) {
|
||||
this.is_reset = false;
|
||||
this.formItem.setValue(this.localValue);
|
||||
}
|
||||
let filesData = Object.keys(newVal).length > 0 ? newVal : [];
|
||||
this.files = [].concat(filesData);
|
||||
},
|
||||
/**
|
||||
* 选择文件
|
||||
*/
|
||||
choose() {
|
||||
if (this.disabled)
|
||||
return;
|
||||
if (this.files.length >= Number(this.limitLength) && this.showType !== "grid" && this.returnType === "array") {
|
||||
common_vendor.index.showToast({
|
||||
title: `您最多选择 ${this.limitLength} 个文件`,
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.chooseFiles();
|
||||
},
|
||||
/**
|
||||
* 选择文件并上传
|
||||
*/
|
||||
chooseFiles() {
|
||||
const _extname = uni_modules_uniFilePicker_components_uniFilePicker_utils.get_extname(this.fileExtname);
|
||||
common_vendor.Zs.chooseAndUploadFile({
|
||||
type: this.fileMediatype,
|
||||
compressed: false,
|
||||
sizeType: this.sizeType,
|
||||
sourceType: this.sourceType,
|
||||
// TODO 如果为空，video 有问题
|
||||
extension: _extname.length > 0 ? _extname : void 0,
|
||||
count: this.limitLength - this.files.length,
|
||||
//默认9
|
||||
onChooseFile: this.chooseFileCallback,
|
||||
onUploadProgress: (progressEvent) => {
|
||||
this.setProgress(progressEvent, progressEvent.index);
|
||||
}
|
||||
}).then((result) => {
|
||||
this.setSuccessAndError(result.tempFiles);
|
||||
}).catch((err) => {
|
||||
console.log("选择失败", err);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 选择文件回调
|
||||
* @param {Object} res
|
||||
*/
|
||||
async chooseFileCallback(res) {
|
||||
const _extname = uni_modules_uniFilePicker_components_uniFilePicker_utils.get_extname(this.fileExtname);
|
||||
const is_one = Number(this.limitLength) === 1 && this.disablePreview && !this.disabled || this.returnType === "object";
|
||||
if (is_one) {
|
||||
this.files = [];
|
||||
}
|
||||
let {
|
||||
filePaths,
|
||||
files
|
||||
} = uni_modules_uniFilePicker_components_uniFilePicker_utils.get_files_and_is_max(res, _extname);
|
||||
if (!(_extname && _extname.length > 0)) {
|
||||
filePaths = res.tempFilePaths;
|
||||
files = res.tempFiles;
|
||||
}
|
||||
let currentData = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
if (this.limitLength - this.files.length <= 0)
|
||||
break;
|
||||
files[i].uuid = Date.now();
|
||||
let filedata = await uni_modules_uniFilePicker_components_uniFilePicker_utils.get_file_data(files[i], this.fileMediatype);
|
||||
filedata.progress = 0;
|
||||
filedata.status = "ready";
|
||||
this.files.push(filedata);
|
||||
currentData.push({
|
||||
...filedata,
|
||||
file: files[i]
|
||||
});
|
||||
}
|
||||
this.$emit("select", {
|
||||
tempFiles: currentData,
|
||||
tempFilePaths: filePaths
|
||||
});
|
||||
res.tempFiles = files;
|
||||
if (!this.autoUpload || this.noSpace) {
|
||||
res.tempFiles = [];
|
||||
}
|
||||
res.tempFiles.forEach((fileItem, index) => {
|
||||
this.provider && (fileItem.provider = this.provider);
|
||||
const fileNameSplit = fileItem.name.split(".");
|
||||
const ext = fileNameSplit.pop();
|
||||
const fileName = fileNameSplit.join(".").replace(/[\s\/\?<>\\:\*\|":]/g, "_");
|
||||
fileItem.cloudPath = fileName + "_" + Date.now() + "_" + index + "." + ext;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 批传
|
||||
* @param {Object} e
|
||||
*/
|
||||
uploadFiles(files) {
|
||||
files = [].concat(files);
|
||||
return uni_modules_uniFilePicker_components_uniFilePicker_chooseAndUploadFile.uploadCloudFiles.call(this, files, 5, (res) => {
|
||||
this.setProgress(res, res.index, true);
|
||||
}).then((result) => {
|
||||
this.setSuccessAndError(result);
|
||||
return result;
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 成功或失败
|
||||
*/
|
||||
async setSuccessAndError(res, fn) {
|
||||
let successData = [];
|
||||
let errorData = [];
|
||||
let tempFilePath = [];
|
||||
let errorTempFilePath = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
const index = item.uuid ? this.files.findIndex((p) => p.uuid === item.uuid) : item.index;
|
||||
if (index === -1 || !this.files)
|
||||
break;
|
||||
if (item.errMsg === "request:fail") {
|
||||
this.files[index].url = item.path;
|
||||
this.files[index].status = "error";
|
||||
this.files[index].errMsg = item.errMsg;
|
||||
errorData.push(this.files[index]);
|
||||
errorTempFilePath.push(this.files[index].url);
|
||||
} else {
|
||||
this.files[index].errMsg = "";
|
||||
this.files[index].fileID = item.url;
|
||||
const reg = /cloud:\/\/([\w.]+\/?)\S*/;
|
||||
if (reg.test(item.url)) {
|
||||
this.files[index].url = await this.getTempFileURL(item.url);
|
||||
} else {
|
||||
this.files[index].url = item.url;
|
||||
}
|
||||
this.files[index].status = "success";
|
||||
this.files[index].progress += 1;
|
||||
successData.push(this.files[index]);
|
||||
tempFilePath.push(this.files[index].fileID);
|
||||
}
|
||||
}
|
||||
if (successData.length > 0) {
|
||||
this.setEmit();
|
||||
this.$emit("success", {
|
||||
tempFiles: this.backObject(successData),
|
||||
tempFilePaths: tempFilePath
|
||||
});
|
||||
}
|
||||
if (errorData.length > 0) {
|
||||
this.$emit("fail", {
|
||||
tempFiles: this.backObject(errorData),
|
||||
tempFilePaths: errorTempFilePath
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取进度
|
||||
* @param {Object} progressEvent
|
||||
* @param {Object} index
|
||||
* @param {Object} type
|
||||
*/
|
||||
setProgress(progressEvent, index, type) {
|
||||
this.files.length;
|
||||
const percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
|
||||
let idx = index;
|
||||
if (!type) {
|
||||
idx = this.files.findIndex((p) => p.uuid === progressEvent.tempFile.uuid);
|
||||
}
|
||||
if (idx === -1 || !this.files[idx])
|
||||
return;
|
||||
this.files[idx].progress = percentCompleted - 1;
|
||||
this.$emit("progress", {
|
||||
index: idx,
|
||||
progress: parseInt(percentCompleted),
|
||||
tempFile: this.files[idx]
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 删除文件
|
||||
* @param {Object} index
|
||||
*/
|
||||
delFile(index) {
|
||||
this.$emit("delete", {
|
||||
index,
|
||||
tempFile: this.files[index],
|
||||
tempFilePath: this.files[index].url
|
||||
});
|
||||
this.files.splice(index, 1);
|
||||
this.$nextTick(() => {
|
||||
this.setEmit();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取文件名和后缀
|
||||
* @param {Object} name
|
||||
*/
|
||||
getFileExt(name) {
|
||||
const last_len = name.lastIndexOf(".");
|
||||
const len = name.length;
|
||||
return {
|
||||
name: name.substring(0, last_len),
|
||||
ext: name.substring(last_len + 1, len)
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 处理返回事件
|
||||
*/
|
||||
setEmit() {
|
||||
let data = [];
|
||||
if (this.returnType === "object") {
|
||||
data = this.backObject(this.files)[0];
|
||||
this.localValue = data ? data : null;
|
||||
} else {
|
||||
data = this.backObject(this.files);
|
||||
if (!this.localValue) {
|
||||
this.localValue = [];
|
||||
}
|
||||
this.localValue = [...data];
|
||||
}
|
||||
this.$emit("update:modelValue", this.localValue);
|
||||
},
|
||||
/**
|
||||
* 处理返回参数
|
||||
* @param {Object} files
|
||||
*/
|
||||
backObject(files) {
|
||||
let newFilesData = [];
|
||||
files.forEach((v) => {
|
||||
newFilesData.push({
|
||||
extname: v.extname,
|
||||
fileType: v.fileType,
|
||||
image: v.image,
|
||||
name: v.name,
|
||||
path: v.path,
|
||||
size: v.size,
|
||||
fileID: v.fileID,
|
||||
url: v.url,
|
||||
// 修改删除一个文件后不能再上传的bug, #694
|
||||
uuid: v.uuid,
|
||||
status: v.status,
|
||||
cloudPath: v.cloudPath
|
||||
});
|
||||
});
|
||||
return newFilesData;
|
||||
},
|
||||
async getTempFileURL(fileList) {
|
||||
fileList = {
|
||||
fileList: [].concat(fileList)
|
||||
};
|
||||
const urls = await common_vendor.Zs.getTempFileURL(fileList);
|
||||
return urls.fileList[0].tempFileURL || "";
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getForm(name = "uniForms") {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent)
|
||||
return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _component_upload_image = common_vendor.resolveComponent("upload-image");
|
||||
const _component_upload_file = common_vendor.resolveComponent("upload-file");
|
||||
(_component_upload_image + _component_upload_file)();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.title
|
||||
}, $props.title ? {
|
||||
b: common_vendor.t($props.title),
|
||||
c: common_vendor.t($options.filesList.length),
|
||||
d: common_vendor.t($options.limitLength)
|
||||
} : {}, {
|
||||
e: $props.fileMediatype === "image" && $options.showType === "grid"
|
||||
}, $props.fileMediatype === "image" && $options.showType === "grid" ? {
|
||||
f: common_vendor.o($options.uploadFiles),
|
||||
g: common_vendor.o($options.choose),
|
||||
h: common_vendor.o($options.delFile),
|
||||
i: common_vendor.p({
|
||||
readonly: $props.readonly,
|
||||
["image-styles"]: $props.imageStyles,
|
||||
["files-list"]: $options.filesList,
|
||||
limit: $options.limitLength,
|
||||
disablePreview: $props.disablePreview,
|
||||
delIcon: $props.delIcon
|
||||
})
|
||||
} : {}, {
|
||||
j: $props.fileMediatype !== "image" || $options.showType !== "grid"
|
||||
}, $props.fileMediatype !== "image" || $options.showType !== "grid" ? {
|
||||
k: common_vendor.o($options.uploadFiles),
|
||||
l: common_vendor.o($options.choose),
|
||||
m: common_vendor.o($options.delFile),
|
||||
n: common_vendor.p({
|
||||
readonly: $props.readonly,
|
||||
["list-styles"]: $props.listStyles,
|
||||
["files-list"]: $options.filesList,
|
||||
showType: $options.showType,
|
||||
delIcon: $props.delIcon
|
||||
})
|
||||
} : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"upload-image": "./upload-image",
|
||||
"upload-file": "./upload-file"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-file-picker__files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.uni-file-picker__lists {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-picker__mask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.uni-file-picker__lists-box {
|
||||
position: relative;
|
||||
}
|
||||
.uni-file-picker__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
padding-right: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.files-border {
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.files__name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 25px;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.icon-files {
|
||||
position: static;
|
||||
background-color: initial;
|
||||
}
|
||||
.is-list-card {
|
||||
border: 1px #eee solid;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px;
|
||||
}
|
||||
.files__image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.header-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.is-text-box {
|
||||
border: 1px #eee solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.is-text-image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-del-box {
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
z-index: 2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
height: 1px;
|
||||
background-color: #333;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view class="uni-file-picker__files"><view a:if="{{a}}" class="files-button" onTap="{{b}}"><slot></slot></view><view a:if="{{c}}" class="uni-file-picker__lists is-text-box" style="{{f}}"><view a:for="{{d}}" a:for-item="item" a:key="h" class="{{('uni-file-picker__lists-box') + ' ' + (item.i && 'files-border')}}" style="{{item.j}}"><view class="uni-file-picker__item"><view class="files__name">{{item.a}}</view><view a:if="{{e}}" class="icon-del-box icon-files" onTap="{{item.b}}"><view class="icon-del icon-files"></view><view class="icon-del rotate"></view></view></view><view a:if="{{item.c}}" class="file-picker__progress"><progress class="file-picker__progress-item" percent="{{item.d}}" stroke-width="4" backgroundColor="{{item.e}}"/></view><view a:if="{{item.f}}" class="file-picker__mask" catchTap="{{item.g}}"> 点击重试 </view></view></view></view>
|
||||
@ -0,0 +1,172 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uploadFile",
|
||||
emits: ["uploadFiles", "choose", "delFile"],
|
||||
props: {
|
||||
filesList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
showType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
listStyles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
// 是否显示边框
|
||||
border: true,
|
||||
// 是否显示分隔线
|
||||
dividline: true,
|
||||
// 线条样式
|
||||
borderStyle: {}
|
||||
};
|
||||
}
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
let files = [];
|
||||
this.filesList.forEach((v) => {
|
||||
files.push(v);
|
||||
});
|
||||
return files;
|
||||
},
|
||||
styles() {
|
||||
let styles = {
|
||||
border: true,
|
||||
dividline: true,
|
||||
"border-style": {}
|
||||
};
|
||||
return Object.assign(styles, this.listStyles);
|
||||
},
|
||||
borderStyle() {
|
||||
let {
|
||||
borderStyle,
|
||||
border
|
||||
} = this.styles;
|
||||
let obj = {};
|
||||
if (!border) {
|
||||
obj.border = "none";
|
||||
} else {
|
||||
let width = borderStyle && borderStyle.width || 1;
|
||||
width = this.value2px(width);
|
||||
let radius = borderStyle && borderStyle.radius || 5;
|
||||
radius = this.value2px(radius);
|
||||
obj = {
|
||||
"border-width": width,
|
||||
"border-style": borderStyle && borderStyle.style || "solid",
|
||||
"border-color": borderStyle && borderStyle.color || "#eee",
|
||||
"border-radius": radius
|
||||
};
|
||||
}
|
||||
let classles = "";
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`;
|
||||
}
|
||||
return classles;
|
||||
},
|
||||
borderLineStyle() {
|
||||
let obj = {};
|
||||
let {
|
||||
borderStyle
|
||||
} = this.styles;
|
||||
if (borderStyle && borderStyle.color) {
|
||||
obj["border-color"] = borderStyle.color;
|
||||
}
|
||||
if (borderStyle && borderStyle.width) {
|
||||
let width = borderStyle && borderStyle.width || 1;
|
||||
let style = borderStyle && borderStyle.style || 0;
|
||||
if (typeof width === "number") {
|
||||
width += "px";
|
||||
} else {
|
||||
width = width.indexOf("px") ? width : width + "px";
|
||||
}
|
||||
obj["border-width"] = width;
|
||||
if (typeof style === "number") {
|
||||
style += "px";
|
||||
} else {
|
||||
style = style.indexOf("px") ? style : style + "px";
|
||||
}
|
||||
obj["border-top-style"] = style;
|
||||
}
|
||||
let classles = "";
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`;
|
||||
}
|
||||
return classles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFiles(item, index) {
|
||||
this.$emit("uploadFiles", {
|
||||
item,
|
||||
index
|
||||
});
|
||||
},
|
||||
choose() {
|
||||
this.$emit("choose");
|
||||
},
|
||||
delFile(index) {
|
||||
this.$emit("delFile", index);
|
||||
},
|
||||
value2px(value) {
|
||||
if (typeof value === "number") {
|
||||
value += "px";
|
||||
} else {
|
||||
value = value.indexOf("px") !== -1 ? value : value + "px";
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: !$props.readonly
|
||||
}, !$props.readonly ? {
|
||||
b: common_vendor.o((...args) => $options.choose && $options.choose(...args))
|
||||
} : {}, {
|
||||
c: $options.list.length > 0
|
||||
}, $options.list.length > 0 ? {
|
||||
d: common_vendor.f($options.list, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.t(item.name)
|
||||
}, $props.delIcon && !$props.readonly ? {
|
||||
b: common_vendor.o(($event) => $options.delFile(index))
|
||||
} : {}, {
|
||||
c: item.progress && item.progress !== 100 || item.progress === 0
|
||||
}, item.progress && item.progress !== 100 || item.progress === 0 ? {
|
||||
d: item.progress === -1 ? 0 : item.progress,
|
||||
e: item.errMsg ? "#ff5a5f" : "#EBEBEB"
|
||||
} : {}, {
|
||||
f: item.status === "error"
|
||||
}, item.status === "error" ? {
|
||||
g: common_vendor.o(($event) => $options.uploadFiles(item, index))
|
||||
} : {}, {
|
||||
h: index,
|
||||
i: index !== 0 && $options.styles.dividline ? 1 : "",
|
||||
j: common_vendor.s(index !== 0 && $options.styles.dividline && $options.borderLineStyle)
|
||||
});
|
||||
}),
|
||||
e: $props.delIcon && !$props.readonly,
|
||||
f: common_vendor.s($options.borderStyle)
|
||||
} : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-file-picker__container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
margin: -5px;
|
||||
}
|
||||
.file-picker__box {
|
||||
position: relative;
|
||||
width: 33.3%;
|
||||
height: 0;
|
||||
padding-top: 33.33%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.file-picker__box-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 5px;
|
||||
border: 1px #eee solid;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-picker__progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* border: 1px red solid; */
|
||||
z-index: 2;
|
||||
}
|
||||
.file-picker__progress-item {
|
||||
width: 100%;
|
||||
}
|
||||
.file-picker__mask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.file-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.is-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-del-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view class="uni-file-picker__container"><view a:for="{{a}}" a:for-item="item" a:key="i" class="file-picker__box" style="{{d}}"><view class="file-picker__box-content" style="{{c}}"><image class="file-image" src="{{item.a}}" mode="aspectFill" catchTap="{{item.b}}"></image><view a:if="{{b}}" class="icon-del-box" catchTap="{{item.c}}"><view class="icon-del"></view><view class="icon-del rotate"></view></view><view a:if="{{item.d}}" class="file-picker__progress"><progress class="file-picker__progress-item" percent="{{item.e}}" stroke-width="4" backgroundColor="{{item.f}}"/></view><view a:if="{{item.g}}" class="file-picker__mask" catchTap="{{item.h}}"> 点击重试 </view></view></view><view a:if="{{e}}" class="file-picker__box" style="{{h}}"><view class="file-picker__box-content is-add" style="{{f}}" onTap="{{g}}"><slot><view class="icon-add"></view><view class="icon-add rotate"></view></slot></view></view></view>
|
||||
@ -0,0 +1,182 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uploadImage",
|
||||
emits: ["uploadFiles", "choose", "delFile"],
|
||||
props: {
|
||||
filesList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disablePreview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
imageStyles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
border: {}
|
||||
};
|
||||
}
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let styles = {
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
border: {}
|
||||
};
|
||||
return Object.assign(styles, this.imageStyles);
|
||||
},
|
||||
boxStyle() {
|
||||
const {
|
||||
width = "auto",
|
||||
height = "auto"
|
||||
} = this.styles;
|
||||
let obj = {};
|
||||
if (height === "auto") {
|
||||
if (width !== "auto") {
|
||||
obj.height = this.value2px(width);
|
||||
obj["padding-top"] = 0;
|
||||
} else {
|
||||
obj.height = 0;
|
||||
}
|
||||
} else {
|
||||
obj.height = this.value2px(height);
|
||||
obj["padding-top"] = 0;
|
||||
}
|
||||
if (width === "auto") {
|
||||
if (height !== "auto") {
|
||||
obj.width = this.value2px(height);
|
||||
} else {
|
||||
obj.width = "33.3%";
|
||||
}
|
||||
} else {
|
||||
obj.width = this.value2px(width);
|
||||
}
|
||||
let classles = "";
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`;
|
||||
}
|
||||
return classles;
|
||||
},
|
||||
borderStyle() {
|
||||
let {
|
||||
border
|
||||
} = this.styles;
|
||||
let obj = {};
|
||||
const widthDefaultValue = 1;
|
||||
const radiusDefaultValue = 3;
|
||||
if (typeof border === "boolean") {
|
||||
obj.border = border ? "1px #eee solid" : "none";
|
||||
} else {
|
||||
let width = border && border.width || widthDefaultValue;
|
||||
width = this.value2px(width);
|
||||
let radius = border && border.radius || radiusDefaultValue;
|
||||
radius = this.value2px(radius);
|
||||
obj = {
|
||||
"border-width": width,
|
||||
"border-style": border && border.style || "solid",
|
||||
"border-color": border && border.color || "#eee",
|
||||
"border-radius": radius
|
||||
};
|
||||
}
|
||||
let classles = "";
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`;
|
||||
}
|
||||
return classles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFiles(item, index) {
|
||||
this.$emit("uploadFiles", item);
|
||||
},
|
||||
choose() {
|
||||
this.$emit("choose");
|
||||
},
|
||||
delFile(index) {
|
||||
this.$emit("delFile", index);
|
||||
},
|
||||
prviewImage(img, index) {
|
||||
let urls = [];
|
||||
if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
|
||||
this.$emit("choose");
|
||||
}
|
||||
if (this.disablePreview)
|
||||
return;
|
||||
this.filesList.forEach((i) => {
|
||||
urls.push(i.url);
|
||||
});
|
||||
common_vendor.index.previewImage({
|
||||
urls,
|
||||
current: index
|
||||
});
|
||||
},
|
||||
value2px(value) {
|
||||
if (typeof value === "number") {
|
||||
value += "px";
|
||||
} else {
|
||||
if (value.indexOf("%") === -1) {
|
||||
value = value.indexOf("px") !== -1 ? value : value + "px";
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.f($props.filesList, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: item.url,
|
||||
b: common_vendor.o(($event) => $options.prviewImage(item, index))
|
||||
}, $props.delIcon && !$props.readonly ? {
|
||||
c: common_vendor.o(($event) => $options.delFile(index))
|
||||
} : {}, {
|
||||
d: item.progress && item.progress !== 100 || item.progress === 0
|
||||
}, item.progress && item.progress !== 100 || item.progress === 0 ? {
|
||||
e: item.progress === -1 ? 0 : item.progress,
|
||||
f: item.errMsg ? "#ff5a5f" : "#EBEBEB"
|
||||
} : {}, {
|
||||
g: item.errMsg
|
||||
}, item.errMsg ? {
|
||||
h: common_vendor.o(($event) => $options.uploadFiles(item, index))
|
||||
} : {}, {
|
||||
i: index
|
||||
});
|
||||
}),
|
||||
b: $props.delIcon && !$props.readonly,
|
||||
c: common_vendor.s($options.borderStyle),
|
||||
d: common_vendor.s($options.boxStyle),
|
||||
e: $props.filesList.length < $props.limit && !$props.readonly
|
||||
}, $props.filesList.length < $props.limit && !$props.readonly ? {
|
||||
f: common_vendor.s($options.borderStyle),
|
||||
g: common_vendor.o((...args) => $options.choose && $options.choose(...args)),
|
||||
h: common_vendor.s($options.boxStyle)
|
||||
} : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const get_file_ext = (name) => {
|
||||
const last_len = name.lastIndexOf(".");
|
||||
const len = name.length;
|
||||
return {
|
||||
name: name.substring(0, last_len),
|
||||
ext: name.substring(last_len + 1, len)
|
||||
};
|
||||
};
|
||||
const get_extname = (fileExtname) => {
|
||||
if (!Array.isArray(fileExtname)) {
|
||||
let extname = fileExtname.replace(/(\[|\])/g, "");
|
||||
return extname.split(",");
|
||||
} else {
|
||||
return fileExtname;
|
||||
}
|
||||
};
|
||||
const get_files_and_is_max = (res, _extname) => {
|
||||
let filePaths = [];
|
||||
let files = [];
|
||||
if (!_extname || _extname.length === 0) {
|
||||
return {
|
||||
filePaths,
|
||||
files
|
||||
};
|
||||
}
|
||||
res.tempFiles.forEach((v) => {
|
||||
let fileFullName = get_file_ext(v.name);
|
||||
const extname = fileFullName.ext.toLowerCase();
|
||||
if (_extname.indexOf(extname) !== -1) {
|
||||
files.push(v);
|
||||
filePaths.push(v.path);
|
||||
}
|
||||
});
|
||||
if (files.length !== res.tempFiles.length) {
|
||||
common_vendor.index.showToast({
|
||||
title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
|
||||
icon: "none",
|
||||
duration: 5e3
|
||||
});
|
||||
}
|
||||
return {
|
||||
filePaths,
|
||||
files
|
||||
};
|
||||
};
|
||||
const get_file_info = (filepath) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.getImageInfo({
|
||||
src: filepath,
|
||||
success(res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail(err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const get_file_data = async (files, type = "image") => {
|
||||
let fileFullName = get_file_ext(files.name);
|
||||
const extname = fileFullName.ext.toLowerCase();
|
||||
let filedata = {
|
||||
name: files.name,
|
||||
uuid: files.uuid,
|
||||
extname: extname || "",
|
||||
cloudPath: files.cloudPath,
|
||||
fileType: files.fileType,
|
||||
thumbTempFilePath: files.thumbTempFilePath,
|
||||
url: files.path || files.path,
|
||||
size: files.size,
|
||||
//单位是字节
|
||||
image: {},
|
||||
path: files.path,
|
||||
video: {}
|
||||
};
|
||||
if (type === "image") {
|
||||
const imageinfo = await get_file_info(files.path);
|
||||
delete filedata.video;
|
||||
filedata.image.width = imageinfo.width;
|
||||
filedata.image.height = imageinfo.height;
|
||||
filedata.image.location = imageinfo.path;
|
||||
} else {
|
||||
delete filedata.image;
|
||||
}
|
||||
return filedata;
|
||||
};
|
||||
exports.get_extname = get_extname;
|
||||
exports.get_file_data = get_file_data;
|
||||
exports.get_files_and_is_max = get_files_and_is_max;
|
||||
532
distribution/unpackage/dist/dev/mp-alipay/uni_modules/uni-icons/components/uni-icons/uni-icons.acss
vendored
Normal file
532
distribution/unpackage/dist/dev/mp-alipay/uni_modules/uni-icons/components/uni-icons/uni-icons.acss
vendored
Normal file
@ -0,0 +1,532 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url("../../../../assets/uniicons.32e978a5.ttf");
|
||||
}
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<text style="{{a}}" class="{{('uni-icons') + ' ' + b + ' ' + c + ' ' + d}}" onTap="{{e}}"><slot></slot></text>
|
||||
@ -0,0 +1,72 @@
|
||||
"use strict";
|
||||
const uni_modules_uniIcons_components_uniIcons_uniicons_file_vue = require("./uniicons_file_vue.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g;
|
||||
return typeof val === "number" || reg.test(val) ? val + "px" : val;
|
||||
};
|
||||
const _sfc_main = {
|
||||
name: "UniIcons",
|
||||
emits: ["click"],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#333333"
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: uni_modules_uniIcons_components_uniIcons_uniicons_file_vue.fontData
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find((v) => v.font_class === this.type);
|
||||
if (code) {
|
||||
return code.unicode;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size);
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== "") {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`;
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.s($options.styleObj),
|
||||
b: common_vendor.n("uniui-" + $props.type),
|
||||
c: common_vendor.n($props.customPrefix),
|
||||
d: common_vendor.n($props.customPrefix ? $props.type : ""),
|
||||
e: common_vendor.o((...args) => $options._onClick && $options._onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,648 @@
|
||||
"use strict";
|
||||
const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": ""
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": ""
|
||||
}
|
||||
];
|
||||
exports.fontData = fontData;
|
||||
@ -0,0 +1,101 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-noticebar.data-v-c3453ea3 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.uni-noticebar-close.data-v-c3453ea3 {
|
||||
margin-left: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.uni-noticebar-icon.data-v-c3453ea3 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.uni-noticebar__content-wrapper.data-v-c3453ea3 {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.uni-noticebar__content-wrapper--single.data-v-c3453ea3 {
|
||||
line-height: 18px;
|
||||
}
|
||||
.uni-noticebar__content-wrapper--single.data-v-c3453ea3,
|
||||
.uni-noticebar__content-wrapper--scrollable.data-v-c3453ea3 {
|
||||
flex-direction: row;
|
||||
}
|
||||
.uni-noticebar__content-wrapper--scrollable.data-v-c3453ea3 {
|
||||
position: relative;
|
||||
}
|
||||
.uni-noticebar__content--scrollable.data-v-c3453ea3 {
|
||||
flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.uni-noticebar__content--single.data-v-c3453ea3 {
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.uni-noticebar__content-text.data-v-c3453ea3 {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.uni-noticebar__content-text--single.data-v-c3453ea3 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.uni-noticebar__content-text--scrollable.data-v-c3453ea3 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice-c3453ea3 10s 0s linear infinite both;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.uni-noticebar__more.data-v-c3453ea3 {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
}
|
||||
@keyframes notice-c3453ea3 {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view a:if="{{a}}" class="uni-noticebar data-v-c3453ea3" style="{{'background-color:' + I}}" onTap="{{J}}"><uni-icons a:if="{{b}}" class="uni-noticebar-icon data-v-c3453ea3" u-i="c3453ea3-0" onVI="__l" u-p="{{c||''}}"/><view ref="textBox" class="{{('uni-noticebar__content-wrapper') + ' ' + 'data-v-c3453ea3' + ' ' + (v && 'uni-noticebar__content-wrapper--scrollable') + ' ' + (w && 'uni-noticebar__content-wrapper--single')}}" style="{{'height:' + x}}"><view id="{{r}}" class="{{('uni-noticebar__content') + ' ' + 'data-v-c3453ea3' + ' ' + (s && 'uni-noticebar__content--scrollable') + ' ' + (t && 'uni-noticebar__content--single')}}"><text id="{{e}}" ref="animationEle" class="{{('uni-noticebar__content-text') + ' ' + 'data-v-c3453ea3' + ' ' + (f && 'uni-noticebar__content-text--scrollable') + ' ' + (g && 'uni-noticebar__content-text--single')}}" style="{{'color:' + h + ';' + ('font-size:' + i) + ';' + ('line-height:' + j) + ';' + ('width:' + k) + ';' + ('animation-duration:' + l) + ';' + ('-webkit-animation-duration:' + m) + ';' + ('animation-play-state:' + n) + ';' + ('-webkit-animation-play-state:' + o) + ';' + ('animation-delay:' + p) + ';' + ('-webkit-animation-delay:' + q)}}">{{d}}</text></view></view><view a:if="{{y}}" class="uni-noticebar__more uni-cursor-point data-v-c3453ea3" onTap="{{E}}"><text a:if="{{z}}" class="data-v-c3453ea3" style="{{'color:' + B + ';' + ('font-size:' + C)}}">{{A}}</text><uni-icons a:else class="data-v-c3453ea3" u-i="c3453ea3-1" onVI="__l" u-p="{{D||''}}"/></view><view a:if="{{F}}" class="uni-noticebar-close uni-cursor-point data-v-c3453ea3"><uni-icons class="data-v-c3453ea3" onClick="{{G}}" u-i="c3453ea3-2" onVI="__l" u-p="{{H||''}}"/></view></view>
|
||||
@ -0,0 +1,207 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "UniNoticeBar",
|
||||
emits: ["click", "getmore", "close"],
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
moreText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "#FFF9EA"
|
||||
},
|
||||
speed: {
|
||||
// 默认1s滚动100px
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#FF9A43"
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
moreColor: {
|
||||
type: String,
|
||||
default: "#FF9A43"
|
||||
},
|
||||
single: {
|
||||
// 是否单行
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
// 是否滚动，添加后控制单行效果取消
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
// 是否显示左侧icon
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showGetMore: {
|
||||
// 是否显示右侧查看更多
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showClose: {
|
||||
// 是否显示左侧关闭按钮
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 1e6).toString(36)}`;
|
||||
const elIdBox = `Uni_${Math.ceil(Math.random() * 1e6).toString(36)}`;
|
||||
return {
|
||||
textWidth: 0,
|
||||
boxWidth: 0,
|
||||
wrapWidth: "",
|
||||
webviewHide: false,
|
||||
elId,
|
||||
elIdBox,
|
||||
show: true,
|
||||
animationDuration: "none",
|
||||
animationPlayState: "paused",
|
||||
animationDelay: "0s"
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text: function(newValue, oldValue) {
|
||||
this.initSize();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShowGetMore() {
|
||||
return this.showGetMore === true || this.showGetMore === "true";
|
||||
},
|
||||
isShowClose() {
|
||||
return (this.showClose === true || this.showClose === "true") && (this.showGetMore === false || this.showGetMore === "false");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initSize();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initSize() {
|
||||
if (this.scrollable) {
|
||||
let query = [];
|
||||
let textQuery = new Promise((resolve, reject) => {
|
||||
common_vendor.index.createSelectorQuery().select(`#${this.elId}`).boundingClientRect().exec((ret) => {
|
||||
this.textWidth = ret[0].width;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
let boxQuery = new Promise((resolve, reject) => {
|
||||
common_vendor.index.createSelectorQuery().select(`#${this.elIdBox}`).boundingClientRect().exec((ret) => {
|
||||
this.boxWidth = ret[0].width;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
query.push(textQuery);
|
||||
query.push(boxQuery);
|
||||
Promise.all(query).then(() => {
|
||||
this.animationDuration = `${this.textWidth / this.speed}s`;
|
||||
this.animationDelay = `-${this.boxWidth / this.speed}s`;
|
||||
setTimeout(() => {
|
||||
this.animationPlayState = "running";
|
||||
}, 1e3);
|
||||
});
|
||||
}
|
||||
},
|
||||
loopAnimation() {
|
||||
},
|
||||
clickMore() {
|
||||
this.$emit("getmore");
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
onClick() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
|
||||
_easycom_uni_icons2();
|
||||
}
|
||||
const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_icons();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.show
|
||||
}, $data.show ? common_vendor.e({
|
||||
b: $props.showIcon === true || $props.showIcon === "true"
|
||||
}, $props.showIcon === true || $props.showIcon === "true" ? {
|
||||
c: common_vendor.p({
|
||||
type: "sound",
|
||||
color: $props.color,
|
||||
size: $props.fontSize * 1.5
|
||||
})
|
||||
} : {}, {
|
||||
d: common_vendor.t($props.text),
|
||||
e: $data.elId,
|
||||
f: $props.scrollable ? 1 : "",
|
||||
g: !$props.scrollable && ($props.single || $props.showGetMore) ? 1 : "",
|
||||
h: $props.color,
|
||||
i: $props.fontSize + "px",
|
||||
j: $props.fontSize * 1.5 + "px",
|
||||
k: $data.wrapWidth + "px",
|
||||
l: $data.animationDuration,
|
||||
m: $data.animationDuration,
|
||||
n: $data.webviewHide ? "paused" : $data.animationPlayState,
|
||||
o: $data.webviewHide ? "paused" : $data.animationPlayState,
|
||||
p: $data.animationDelay,
|
||||
q: $data.animationDelay,
|
||||
r: $data.elIdBox,
|
||||
s: $props.scrollable ? 1 : "",
|
||||
t: !$props.scrollable && ($props.single || $props.moreText) ? 1 : "",
|
||||
v: $props.scrollable ? 1 : "",
|
||||
w: !$props.scrollable && ($props.single || $props.moreText) ? 1 : "",
|
||||
x: $props.scrollable ? $props.fontSize * 1.5 + "px" : "auto",
|
||||
y: $options.isShowGetMore
|
||||
}, $options.isShowGetMore ? common_vendor.e({
|
||||
z: $props.moreText.length > 0
|
||||
}, $props.moreText.length > 0 ? {
|
||||
A: common_vendor.t($props.moreText),
|
||||
B: $props.moreColor,
|
||||
C: $props.fontSize + "px"
|
||||
} : {
|
||||
D: common_vendor.p({
|
||||
type: "right",
|
||||
color: $props.moreColor,
|
||||
size: $props.fontSize * 1.1
|
||||
})
|
||||
}, {
|
||||
E: common_vendor.o((...args) => $options.clickMore && $options.clickMore(...args))
|
||||
}) : {}, {
|
||||
F: $options.isShowClose
|
||||
}, $options.isShowClose ? {
|
||||
G: common_vendor.o($options.close),
|
||||
H: common_vendor.p({
|
||||
type: "closeempty",
|
||||
color: $props.color,
|
||||
size: $props.fontSize * 1.1
|
||||
})
|
||||
} : {}, {
|
||||
I: $props.backgroundColor,
|
||||
J: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c3453ea3"]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"uni-icons": "../../../uni-icons/components/uni-icons/uni-icons"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
.uni-popup.top, .uni-popup.left, .uni-popup.right {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left, .uni-popup .uni-popup__wrapper.right {
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<view a:if="{{a}}" class="{{('uni-popup') + ' ' + k + ' ' + l}}"><view onTouchStart="{{j}}"><uni-transition a:if="{{b}}" key="1" onClick="{{c}}" u-i="7e14be24-0" onVI="__l" u-p="{{d||''}}"/><uni-transition u-s="{{['d']}}" key="2" onClick="{{h}}" u-i="7e14be24-1" onVI="__l" u-p="{{i||''}}"><view style="{{e}}" class="{{('uni-popup__wrapper') + ' ' + f}}" onTap="{{g}}"><slot/></view></uni-transition></view></view>
|
||||
396
distribution/unpackage/dist/dev/mp-alipay/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
396
distribution/unpackage/dist/dev/mp-alipay/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
@ -0,0 +1,396 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: "center"
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "none"
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
borderRadius: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type])
|
||||
return;
|
||||
this[this.config[type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal])
|
||||
return;
|
||||
this[this.config[this.type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: "top",
|
||||
bottom: "bottom",
|
||||
center: "center",
|
||||
left: "left",
|
||||
right: "right",
|
||||
message: "top",
|
||||
dialog: "center",
|
||||
share: "bottom"
|
||||
},
|
||||
maskClass: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
transClass: {
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: "top"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius });
|
||||
}
|
||||
return res;
|
||||
},
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === "" || this.backgroundColor === "none") {
|
||||
return "transparent";
|
||||
}
|
||||
return this.backgroundColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = common_vendor.index.getSystemInfoSync();
|
||||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
if (safeArea && this.safeArea) {
|
||||
this.safeAreaInsets = safeAreaInsets.bottom;
|
||||
} else {
|
||||
this.safeAreaInsets = 0;
|
||||
}
|
||||
};
|
||||
fixSize();
|
||||
},
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible();
|
||||
},
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
}
|
||||
this.messageChild = null;
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false;
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false;
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
e.stopPropagation();
|
||||
this.clearPropagation = true;
|
||||
},
|
||||
open(direction) {
|
||||
if (this.showPopup) {
|
||||
return;
|
||||
}
|
||||
let innerType = ["top", "center", "bottom", "left", "right", "message", "dialog", "share"];
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error("缺少类型：", direction);
|
||||
return;
|
||||
}
|
||||
this[this.config[direction]]();
|
||||
this.$emit("change", {
|
||||
show: true,
|
||||
type: direction
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false;
|
||||
this.$emit("change", {
|
||||
show: false,
|
||||
type: this.type
|
||||
});
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false;
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
this.clearPropagation = false;
|
||||
return;
|
||||
}
|
||||
this.$emit("maskClick");
|
||||
if (!this.mkclick)
|
||||
return;
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? "fixforpc-top" : "top";
|
||||
this.ani = ["slide-top"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
this.showPoptrans();
|
||||
if (this.messageChild && this.type === "message") {
|
||||
this.messageChild.timerClose();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = "bottom";
|
||||
this.ani = ["slide-bottom"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + "px",
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = "center";
|
||||
this.ani = ["zoom-out", "fade"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = "left";
|
||||
this.ani = ["slide-left"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = "right";
|
||||
this.ani = ["slide-right"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
showPoptrans() {
|
||||
this.$nextTick(() => {
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_transition2 = common_vendor.resolveComponent("uni-transition");
|
||||
_easycom_uni_transition2();
|
||||
}
|
||||
const _easycom_uni_transition = () => "../../../uni-transition/components/uni-transition/uni-transition.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_transition();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.showPopup
|
||||
}, $data.showPopup ? common_vendor.e({
|
||||
b: $data.maskShow
|
||||
}, $data.maskShow ? {
|
||||
c: common_vendor.o($options.onTap),
|
||||
d: common_vendor.p({
|
||||
name: "mask",
|
||||
["mode-class"]: "fade",
|
||||
styles: $data.maskClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
})
|
||||
} : {}, {
|
||||
e: common_vendor.s($options.getStyles),
|
||||
f: common_vendor.n($data.popupstyle),
|
||||
g: common_vendor.o((...args) => $options.clear && $options.clear(...args)),
|
||||
h: common_vendor.o($options.onTap),
|
||||
i: common_vendor.p({
|
||||
["mode-class"]: $data.ani,
|
||||
name: "content",
|
||||
styles: $data.transClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args)),
|
||||
k: common_vendor.n($data.popupstyle),
|
||||
l: common_vendor.n($options.isDesktop ? "fixforpc-z-index" : "")
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,115 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options;
|
||||
this.animation = common_vendor.index.createAnimation({
|
||||
...options
|
||||
});
|
||||
this.currentStepAnimates = {};
|
||||
this.next = 0;
|
||||
this.$ = _this;
|
||||
}
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next];
|
||||
let styles = {};
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
};
|
||||
} else {
|
||||
styles = aniObj;
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = "";
|
||||
}
|
||||
let unit = "";
|
||||
if (type === "rotate") {
|
||||
unit = "deg";
|
||||
}
|
||||
styles.styles.transform += `${type}(${args + unit}) `;
|
||||
} else {
|
||||
styles.styles[type] = `${args}`;
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles;
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs["ani"].ref;
|
||||
if (!ref)
|
||||
return;
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, (res) => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step];
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj;
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1;
|
||||
this._nvueNextAnimate(animates, step, fn);
|
||||
});
|
||||
} else {
|
||||
this.currentStepAnimates = {};
|
||||
typeof fn === "function" && fn();
|
||||
this.isEnd = true;
|
||||
}
|
||||
}
|
||||
step(config = {}) {
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
}
|
||||
run(fn) {
|
||||
this.$.animationData = this.animation.export();
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === "function" && fn();
|
||||
}, this.$.durationTime);
|
||||
}
|
||||
}
|
||||
const animateTypes1 = [
|
||||
"matrix",
|
||||
"matrix3d",
|
||||
"rotate",
|
||||
"rotate3d",
|
||||
"rotateX",
|
||||
"rotateY",
|
||||
"rotateZ",
|
||||
"scale",
|
||||
"scale3d",
|
||||
"scaleX",
|
||||
"scaleY",
|
||||
"scaleZ",
|
||||
"skew",
|
||||
"skewX",
|
||||
"skewY",
|
||||
"translate",
|
||||
"translate3d",
|
||||
"translateX",
|
||||
"translateY",
|
||||
"translateZ"
|
||||
];
|
||||
const animateTypes2 = ["opacity", "backgroundColor"];
|
||||
const animateTypes3 = ["width", "height", "left", "right", "top", "bottom"];
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
this.animation[type](...args);
|
||||
return this;
|
||||
};
|
||||
});
|
||||
function createAnimation(option, _this) {
|
||||
if (!_this)
|
||||
return;
|
||||
clearTimeout(_this.timer);
|
||||
return new MPAnimation(option, _this);
|
||||
}
|
||||
exports.createAnimation = createAnimation;
|
||||
@ -0,0 +1 @@
|
||||
<view hidden="{{!a}}" ref="ani" animation="{{b}}" class="{{c}}" style="{{d}}" onTap="{{e}}"><slot></slot></view>
|
||||
@ -0,0 +1,265 @@
|
||||
"use strict";
|
||||
const uni_modules_uniTransition_components_uniTransition_createAnimation = require("./createAnimation.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniTransition",
|
||||
emits: ["click", "change"],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return "fade";
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
onceRender: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: "",
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
if (this.isShow) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
"transition-duration": this.duration / 1e3 + "s"
|
||||
};
|
||||
let transform = "";
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i);
|
||||
transform += line + ":" + styles[i] + ";";
|
||||
}
|
||||
return transform;
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return "transform:" + this.transform + ";opacity:" + this.opacity + ";" + this.stylesObject;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: "ease",
|
||||
transformOrigin: "50% 50%",
|
||||
delay: 0
|
||||
};
|
||||
this.durationTime = this.duration;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration;
|
||||
}
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(Object.assign(this.config, obj), this);
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit("click", {
|
||||
detail: this.isShow
|
||||
});
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
for (let i in obj) {
|
||||
try {
|
||||
if (typeof obj[i] === "object") {
|
||||
this.animation[i](...obj[i]);
|
||||
} else {
|
||||
this.animation[i](obj[i]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`方法 ${i} 不存在`);
|
||||
}
|
||||
}
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.animation.run(fn);
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.transform = "";
|
||||
this.isShow = true;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
if (typeof opacity !== "undefined") {
|
||||
this.opacity = opacity;
|
||||
}
|
||||
this.transform = transform;
|
||||
this.$nextTick(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
this.animation.run();
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
}, 20);
|
||||
});
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.tranfromInit(true).step().run(() => {
|
||||
this.isShow = false;
|
||||
this.animationData = null;
|
||||
this.animation = null;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
this.opacity = opacity || 1;
|
||||
this.transform = transform;
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
});
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = {
|
||||
transform: ""
|
||||
};
|
||||
let buildStyle = (type2, mode) => {
|
||||
if (mode === "fade") {
|
||||
styles.opacity = this.animationType(type2)[mode];
|
||||
} else {
|
||||
styles.transform += this.animationType(type2)[mode] + " ";
|
||||
}
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildStyle(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => {
|
||||
buildStyle(type, mode);
|
||||
});
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type2, mode) => {
|
||||
let aniNum = null;
|
||||
if (mode === "fade") {
|
||||
aniNum = type2 ? 0 : 1;
|
||||
} else {
|
||||
aniNum = type2 ? "-100%" : "0";
|
||||
if (mode === "zoom-in") {
|
||||
aniNum = type2 ? 0.8 : 1;
|
||||
}
|
||||
if (mode === "zoom-out") {
|
||||
aniNum = type2 ? 1.2 : 1;
|
||||
}
|
||||
if (mode === "slide-right") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
if (mode === "slide-bottom") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum);
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildTranfrom(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => {
|
||||
buildTranfrom(type, mode);
|
||||
});
|
||||
}
|
||||
return this.animation;
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 0 : 1,
|
||||
"slide-top": `translateY(${type ? "0" : "-100%"})`,
|
||||
"slide-right": `translateX(${type ? "0" : "100%"})`,
|
||||
"slide-bottom": `translateY(${type ? "0" : "100%"})`,
|
||||
"slide-left": `translateX(${type ? "0" : "-100%"})`,
|
||||
"zoom-in": `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
"zoom-out": `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
};
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: "opacity",
|
||||
"slide-top": "translateY",
|
||||
"slide-right": "translateX",
|
||||
"slide-bottom": "translateY",
|
||||
"slide-left": "translateX",
|
||||
"zoom-in": "scale",
|
||||
"zoom-out": "scale"
|
||||
};
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $data.isShow,
|
||||
b: $data.animationData,
|
||||
c: common_vendor.n($props.customClass),
|
||||
d: common_vendor.s($options.transformStyles),
|
||||
e: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
my.createComponent(Component);
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
Reference in New Issue
Block a user