다음의 미러
https://github.com/ialley-workshop-open/uni-halo.git
동기화됨 2026-06-12 13:19:31 +08:00
新增:更新halo.config.js 配置参数;
更新:更新项目UI框架; 修复:修复友链列表丢失白色背景色BUG;
이 커밋은 다음에 포함됨:
@@ -1,3 +1,23 @@
|
||||
## 2.0.1(2022-12-8)
|
||||
* 修复 tm-icons在小程序下可能图标与文字无法对齐
|
||||
* 优化 tm-album性能,修复可能在嵌套组件中,无法计算宽高信息.
|
||||
* 优化 tm-dragList性能
|
||||
* 优化 tm-row性能
|
||||
* 优化 tm-segTabs性能
|
||||
* 优化 tm-sheet性能
|
||||
* 优化 tm-slider,tm-sliders性能
|
||||
* 优化 tm-more性能
|
||||
* 优化 tm-propress性能,修复可能在嵌套组件中,无法计算宽高信息.
|
||||
* 优化 tm-dialog,tm-poup,动效及样式
|
||||
* 微调 tm-button
|
||||
* 美化了tm-calendar,tm-calendar-view,选中改成圆形,范围改成椭圆形。
|
||||
* 修复 tm-countdown 完成的时机逻辑有误,修改后默认为完成状态。
|
||||
* 增强 tm-upload 新增showSort属性,用于上传的文件排序功能。
|
||||
* 修复 tm-swiper圆角失效。
|
||||
* 修复 tm-weekbar日期问题。
|
||||
* 修复 tm-dragGrid 动态修改数据后的判断逻辑问题。
|
||||
* 优化 tm-grouplist 渲染性能,现在已经是秒渲染。
|
||||
* 修复$tm.vx.getters()下的属性丢失。
|
||||
## 2.0.0(2022-6-7)
|
||||
* tm-card修复点击操作按钮时返回的参数非index,而是项目标题。修复动态配置一些属性不生效的问题。
|
||||
* tm-dropDownMenu 优化,当重置项时,默认将使用你初始的选中数据来进行填充,默认选中。
|
||||
|
||||
@@ -159,7 +159,10 @@
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.setInits();
|
||||
this.setInits();
|
||||
},
|
||||
updated() {
|
||||
this.setInits();
|
||||
},
|
||||
methods: {
|
||||
//处理数据,以标准化。
|
||||
@@ -186,20 +189,16 @@
|
||||
async setInits(){
|
||||
this.$nextTick(async function() {
|
||||
let t = this;
|
||||
this.$tm.sleep(150).then(async function(){
|
||||
let p = await t.$Querey('.tm-album',t).catch(e =>{});
|
||||
if (!p[0]) return;
|
||||
let grid = t.grid || 1;
|
||||
let size = (p[0].width+t.gutter)/grid;
|
||||
let gutter = t.gutter*2
|
||||
let ratio = 750/uni.upx2px(750);
|
||||
let blv = size * ratio - gutter;
|
||||
t.alb_body_size = size * ratio;
|
||||
t.alb_wk_body_size = p[0].width*ratio+t.gutter*2+(grid*2);
|
||||
t.alb_size = blv;
|
||||
})
|
||||
|
||||
|
||||
let p = await t.$Querey('.tm-album',t,0).catch(e =>{});
|
||||
if (!p[0]) return;
|
||||
let grid = t.grid || 1;
|
||||
let size = (p[0].width+t.gutter)/grid;
|
||||
let gutter = t.gutter*2
|
||||
let ratio = 750/uni.upx2px(750);
|
||||
let blv = size * ratio - gutter;
|
||||
t.alb_body_size = size * ratio;
|
||||
t.alb_wk_body_size = p[0].width*ratio+t.gutter*2+(grid*2);
|
||||
t.alb_size = blv;
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="tm-button " :class="[block ? 'd-block' : 'd-inline-block ']">
|
||||
<view class="tm-button " :class="[block ? 'd-block' : 'd-inline-block ']" hover-class="opacity-6">
|
||||
<view
|
||||
class="flex-center tm-button-btn fulled-height"
|
||||
:class="[block ? '' : customDense_puted ? '' : 'ma-10', block ? 'd-block' : 'd-inline-block', black_tmeme ? 'bk' : '', customStyleTm]"
|
||||
@@ -54,7 +54,7 @@
|
||||
<block v-if="vtype == true">
|
||||
<text
|
||||
v-if="!fab && icon"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '', 'px-12']"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '', 'px-12','flex-shrink']"
|
||||
:style="{
|
||||
fontSize: `${icon_size.px}px`,
|
||||
lineHeight:'normal'
|
||||
@@ -62,7 +62,7 @@
|
||||
></text>
|
||||
<text
|
||||
v-if="fab && icon && !loading && !titl"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '']"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
|
||||
:style="{
|
||||
fontSize: `${icon_size.px}px`,
|
||||
lineHeight:'normal'
|
||||
@@ -70,7 +70,7 @@
|
||||
></text>
|
||||
<text
|
||||
v-if="fab && icon && !loading && titl"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${color_tmeme}` : '', black_tmeme ? 'opacity-6' : '']"
|
||||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${color_tmeme}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
|
||||
:style="{
|
||||
fontSize: `${icon_size.px}px`,
|
||||
lineHeight:'normal'
|
||||
@@ -80,7 +80,7 @@
|
||||
<block v-if="vtype == false"><tm-icons :size="icon_size.upx" :name="icon"></tm-icons></block>
|
||||
</slot>
|
||||
|
||||
<view v-if="!fab || showValue" class="d-inline-block tm-button-label flex-shrink" :style="{ fontSize: font_size }" :class="[fontColor ? `text-${colors.color}` : '']">
|
||||
<view v-if="!fab || showValue" class="d-inline-block tm-button-label flex-shrink" :style="{ fontSize: font_size }" :class="[fontColor ? `text-${colors.color}` : '',vertical ? 'full ' : '',]">
|
||||
<slot name="default" :data="label">{{ label }}</slot>
|
||||
</view>
|
||||
</button>
|
||||
@@ -556,11 +556,13 @@ export default {
|
||||
line-height: 88upx;
|
||||
height: 88upx;
|
||||
vertical-align: middle;
|
||||
|
||||
// #ifdef H5
|
||||
transition: all 0.3s;
|
||||
// #endif
|
||||
.tm-button-label {
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
@@ -671,6 +673,7 @@ export default {
|
||||
}
|
||||
&.showValue {
|
||||
line-height: inherit !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.noGutter {
|
||||
|
||||
@@ -54,13 +54,21 @@
|
||||
:key="index+'_acv'"><text class="text-size-s py-16">{{item}}</text>
|
||||
</tm-col>
|
||||
<!-- #endif -->
|
||||
<tm-col :round="(item.start||item.end||item.checked)?4:0" @click="day_danxuanclick(item,index)"
|
||||
:color="item.beginEnd?(item.checked===true||item.start||item.end?color_tmeme+(black_tmeme?' bk ':''):(item.guocheng?color_tmeme+' text opacity-7 '+(black_tmeme?'bk':''):'')):''"
|
||||
<tm-col
|
||||
@click="day_danxuanclick(item,index)"
|
||||
color=""
|
||||
:custom-class="isSelectedDateClass(item)"
|
||||
align="middle" width="14.28%" v-for="(item,index) in nowData"
|
||||
:key="index">
|
||||
|
||||
<view class="tm-calendar-col flex-center flex-col py-4" :class="[black_tmeme&&!item.beginEnd?' opacity-2 ':'']">
|
||||
justify="center" width="14.28%"
|
||||
v-for="(item,index) in nowData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="tm-calendar-col flex-center flex-col "
|
||||
:style="[mode=='rang'?{width:'100%',height:'90rpx'}:{width:'90rpx',height:'90rpx',overflow: 'hidden','border-radius': '50% !important'}]"
|
||||
:class="[
|
||||
item.start?'round-l-24':'',
|
||||
item.end?'round-r-24':'',
|
||||
item.beginEnd?(item.checked===true||item.start||item.end?color_tmeme+(black_tmeme?' bk ':''):(item.guocheng?color_tmeme+' text opacity-7 '+(black_tmeme?'bk':''):'')):'',
|
||||
black_tmeme&&!item.beginEnd?' opacity-2 ':'']">
|
||||
|
||||
<text class="text-size-n "
|
||||
:class="[
|
||||
@@ -70,19 +78,14 @@
|
||||
!item.beginEnd?'text-grey-lighten-3':''
|
||||
]"
|
||||
>{{item.day}}</text>
|
||||
<!--
|
||||
!item.nowMonth&&!item.guocheng&&!item.checked&&!item.start&&!item.end?(black?'text-grey-darken-3':'text-grey-lighten-1'):'',
|
||||
item.checked||item.start||item.end?'text-white':(item.guocheng?'':'text-grey-lighten-1'),
|
||||
item.guocheng?'text-'+color:'',
|
||||
!item.beginEnd?'text-grey-lighten-3':'',
|
||||
-->
|
||||
|
||||
<view class="text-size-xs text_bl"
|
||||
>
|
||||
<block v-if="item.start">
|
||||
开始
|
||||
始
|
||||
</block>
|
||||
<block v-if="item.end">
|
||||
结束
|
||||
-止
|
||||
</block>
|
||||
|
||||
<block v-if="!item.start&&!item.end">
|
||||
@@ -134,6 +137,11 @@
|
||||
import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
|
||||
import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
|
||||
import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
|
||||
import * as dayjs from "@/tm-vuetify/tool/function/dayjs/dayjs.min.js"
|
||||
const calendar = require("@/tm-vuetify/tool/function/dayjs/calendar.js")
|
||||
dayjs.extend(calendar)
|
||||
const DayJs = dayjs.default
|
||||
|
||||
export default {
|
||||
components:{tmIcons,tmCol,tmRow,tmButton,tmPoup},
|
||||
name: "tm-calendar",
|
||||
@@ -262,7 +270,7 @@
|
||||
if(!this.cal) return;
|
||||
// 自动更新默认的显示时间。
|
||||
if(this.mode=='day'){
|
||||
let d = new Date().toLocaleDateString().replace(/\//g,'-');
|
||||
let d = DayJs().format("YYYY/MM/DD HH:mm:ss");
|
||||
if(this.defaultValue){
|
||||
d = this.defaultValue;
|
||||
}
|
||||
@@ -343,10 +351,9 @@
|
||||
},
|
||||
methods: {
|
||||
watchRangeTime(){
|
||||
|
||||
let d = new Date().toLocaleDateString().replace(/\//g,'-');
|
||||
let d = DayJs().format("YYYY/MM/DD HH:mm:ss")
|
||||
if(this.defaultValue){
|
||||
d = this.defaultValue;
|
||||
d = DayJs(this.defaultValue).format("YYYY/MM/DD HH:mm:ss");
|
||||
}
|
||||
this.cal = new this.$tm.calendar({value:d,start:this.timeStart,end:this.timeEnd})
|
||||
if(this.txt){
|
||||
@@ -366,8 +373,8 @@
|
||||
if(this.bingStart&&this.bingEnd){
|
||||
|
||||
this.fanxuanxuanwuBydate(
|
||||
new Date(this.bingStart.replace(/-/g,'/')),
|
||||
new Date(this.bingEnd.replace(/-/g,'/')),
|
||||
DayJs(this.bingStart),
|
||||
DayJs(this.bingEnd),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -609,13 +616,14 @@
|
||||
// 通过外围 时间默认的选中
|
||||
fanxuanxuanwuBydate(start,end){
|
||||
if(!start||!end) return;
|
||||
// .format("YYYY/MM/DD HH:mm:ss")
|
||||
|
||||
this.$nextTick(function(){
|
||||
if(start.getTime()>end.getTime()) return;
|
||||
if(start.valueOf()>end.valueOf()) return;
|
||||
// 获取开始月份的数据。
|
||||
let sobj = new this.$tm.calendar({value:start.toLocaleDateString().replace(/\//g,'-')});
|
||||
let sobj = new this.$tm.calendar({value:start.format("YYYY/MM/DD HH:mm:ss")});
|
||||
// 获取结束月份的数据。
|
||||
let eobj = new this.$tm.calendar({value:end.toLocaleDateString().replace(/\//g,'-')});
|
||||
let eobj = new this.$tm.calendar({value:end.format("YYYY/MM/DD HH:mm:ss")});
|
||||
function findItemToindex_only(obj,type){
|
||||
let item=null;
|
||||
for(let i=0;i<obj.length;i++){
|
||||
@@ -657,7 +665,7 @@
|
||||
this.start = start_obj
|
||||
this.end = end_obj
|
||||
// 如果结束和开始相等。
|
||||
if(start.getTime()==end.getTime()){
|
||||
if(start.valueOf()==end.valueOf()){
|
||||
this.start = {...this.start,start:true,end:true}
|
||||
this.end = {...this.end,start:true,end:true}
|
||||
}
|
||||
|
||||
@@ -48,12 +48,21 @@
|
||||
:key="index"><text class="text-size-s py-16">{{item}}</text>
|
||||
</tm-col>
|
||||
<!-- #endif -->
|
||||
<tm-col :round="(item.start||item.end||item.checked)?4:0" @click="day_danxuanclick(item,index)"
|
||||
:color="item.beginEnd?(item.checked===true||item.start||item.end?color_tmeme+(black_tmeme?' bk ':''):(item.guocheng?color_tmeme+' text opacity-7 '+(black_tmeme?'bk':''):'')):''"
|
||||
<tm-col
|
||||
@click="day_danxuanclick(item,index)"
|
||||
color=""
|
||||
:custom-class="isSelectedDateClass(item)"
|
||||
align="middle" width="14.28%" v-for="(item,index) in nowData"
|
||||
:key="index">
|
||||
<view class="tm-calendarView-col flex-center flex-col" :class="[black&&!item.beginEnd?' opacity-2 ':'']">
|
||||
justify="center" width="14.28%"
|
||||
v-for="(item,index) in nowData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="tm-calendar-col flex-center flex-col "
|
||||
:style="[mode=='rang'?{width:'100%',height:'90rpx'}:{width:'90rpx',height:'90rpx',overflow: 'hidden','border-radius': '50% !important'}]"
|
||||
:class="[
|
||||
item.start?'round-l-24':'',
|
||||
item.end?'round-r-24':'',
|
||||
item.beginEnd?(item.checked===true||item.start||item.end?color_tmeme+(black_tmeme?' bk ':''):(item.guocheng?color_tmeme+' text opacity-7 '+(black_tmeme?'bk':''):'')):'',
|
||||
black_tmeme&&!item.beginEnd?' opacity-2 ':'']">
|
||||
<text class="text-size-n"
|
||||
:class="[
|
||||
!item.nowMonth&&!item.guocheng&&!item.checked&&!item.start&&!item.end?(black_tmeme?'text-grey-darken-3':'text-grey-lighten-1'):'',
|
||||
@@ -65,10 +74,10 @@
|
||||
<view class="text-size-xs text_bl"
|
||||
>
|
||||
<block v-if="item.start">
|
||||
开始
|
||||
始
|
||||
</block>
|
||||
<block v-if="item.end">
|
||||
结束
|
||||
-止
|
||||
</block>
|
||||
|
||||
<block v-if="!item.start&&!item.end">
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
return ps;
|
||||
},
|
||||
isfinish:function(){
|
||||
if(this.now == this.time) return true;
|
||||
if(this.now == this.time||this.now==0) return true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -302,19 +302,19 @@ export default {
|
||||
.tm-dialog {
|
||||
width: 100%;
|
||||
z-index: 600;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.35s;
|
||||
backdrop-filter: blur(3px);
|
||||
transition: all 0.24s;
|
||||
.success {
|
||||
animation: success 0.35s linear;
|
||||
animation: success 0.24s ease;
|
||||
|
||||
// transform: scale(1);
|
||||
}
|
||||
.clickover {
|
||||
animation: clickover 0.35s linear;
|
||||
animation: clickover 0.24s ease;
|
||||
}
|
||||
}
|
||||
@keyframes clickover {
|
||||
|
||||
@@ -253,10 +253,10 @@
|
||||
this.$emit('change',elList);
|
||||
},
|
||||
inits() {
|
||||
this.grid = this.list.length;
|
||||
if(this.grid==0) return;
|
||||
this.$nextTick(async function() {
|
||||
let p = await this.$Querey(".tm-dragGrid", this).catch(e => {})
|
||||
this.grid = this.list.length;
|
||||
this.listData = [];
|
||||
//组件的宽度
|
||||
this.w = uni.upx2px(this.width) || p[0].width || 300;
|
||||
|
||||
@@ -140,7 +140,6 @@
|
||||
jishunTopData() {
|
||||
this.$nextTick(async function() {
|
||||
this.listData = [];
|
||||
|
||||
let p = await this.$Querey(".tm-dragList", this).catch(e => {})
|
||||
this.w = uni.upx2px(this.width) || p[0].width;
|
||||
this.h = uni.upx2px(this.height)
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
@touchcancel="$emit('touchcancel', $event)"
|
||||
:open-type="openType"
|
||||
@click="click"
|
||||
:padding="[0,0]"
|
||||
:showValue="showText" vertical :label="label" :fontSize="fontSize"
|
||||
:iconSize="iconSize" :theme="color_tmeme" round="rouned" :font-color="fontColor" :bgcolor="bgcolor"
|
||||
:size="size" :width="width" :height="width" :icon="icon" fab>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<view v-if="title&&title!='true'" class="px-32 py-16 text-weight-b " :class="[`text-size-${fontSize}`,titleTheme, black_tmeme ? 'bk' : '']">
|
||||
<slot name="title" :title="title">{{ title }}</slot>
|
||||
</view>
|
||||
<view v-show="chuliWsok==true">
|
||||
<view >
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
@@ -77,6 +77,20 @@ export default {
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
}
|
||||
},
|
||||
provide(){
|
||||
let t = this;
|
||||
return {
|
||||
GroupListStyles:()=>{
|
||||
return {
|
||||
margin: [0,0],
|
||||
padding: [32,24],
|
||||
shadow: 0,
|
||||
round: 0,
|
||||
borderBottom: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
targ:'tm-grouplist',
|
||||
@@ -99,47 +113,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
inits(){
|
||||
let t = this;
|
||||
this.$nextTick(function () {
|
||||
let ch = this.$children;
|
||||
// #ifdef H5
|
||||
ch = [];
|
||||
let cld = this.$children[0].$children
|
||||
|
||||
while(cld){
|
||||
if(cld[0].$children.length>0){
|
||||
let ods = cld[0].$children;
|
||||
ch =ods[ods.length-1].$children;
|
||||
|
||||
break;
|
||||
}else{
|
||||
cld = cld[0]?.$children
|
||||
}
|
||||
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
ch.forEach((item,index)=>{
|
||||
|
||||
if(item.$options.name==="tm-listitem"){
|
||||
item.setConfig({
|
||||
margin: [0,0],
|
||||
padding: [32,24],
|
||||
shadow: 0,
|
||||
round: 0,
|
||||
borderBottom: index===ch.length-1?false:t.borderBottom
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// #ifndef H5
|
||||
setTimeout(function() {
|
||||
t.chuliWsok = true;
|
||||
}, 30);
|
||||
// #endif
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
// 事件一定是子项目tm-listitem为group模式时,才会触发。
|
||||
change(vue_uid) {
|
||||
|
||||
@@ -1,187 +1,190 @@
|
||||
<template>
|
||||
<!-- 图标 -->
|
||||
<view @click="onclick" v-if="name" class="tm-icons vertical-align-top" style="display: inline-block;font-size: 0;" >
|
||||
<view class="flex-center " :style="{
|
||||
width: sizes,
|
||||
height: sizes,
|
||||
lineHeight:sizes,
|
||||
|
||||
}">
|
||||
<view @click="onclick" v-if="name" class="tm-icons " >
|
||||
<view
|
||||
class="tm-icons-item "
|
||||
:style="{
|
||||
width: sizes,
|
||||
height: sizes,
|
||||
lineHeight: sizes
|
||||
}"
|
||||
>
|
||||
<block v-if="vtype == false">
|
||||
<image :src="name" :style="{
|
||||
<image
|
||||
:src="name"
|
||||
:style="{
|
||||
width: sizes,
|
||||
height: sizes
|
||||
}" mode="scaleToFill"></image>
|
||||
}"
|
||||
mode="scaleToFill"
|
||||
></image>
|
||||
</block>
|
||||
<block v-if="vtype == true">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="{
|
||||
<text
|
||||
:style="{
|
||||
fontSize: sizes,
|
||||
fontFamily:'iconfontTM'
|
||||
}" class="icons "
|
||||
:class="[ black_tmeme ? colors+'-bk':colors, dense ? '' : 'pa-10', black ? 'opacity-6' : '']">{{iconName}}</text>
|
||||
fontFamily: 'iconfontTM'
|
||||
}"
|
||||
class="icons "
|
||||
:class="[black_tmeme ? colors + '-bk' : colors, dense ? '' : 'pa-10', black ? 'opacity-6' : '']"
|
||||
>
|
||||
{{ iconName }}
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<text :style="{
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text
|
||||
:style="{
|
||||
fontSize: sizes,
|
||||
}" class="icons mt--4"
|
||||
:class="[prefx_computed, black_tmeme ? 'bk' : '', iconName, colorTheme ? colors : '', dense ? '' : 'pa-10', black ? 'opacity-6' : '']"></text>
|
||||
|
||||
}"
|
||||
class="icons "
|
||||
:class="[prefx_computed, black_tmeme ? 'bk' : '', iconName, colorTheme ? colors : '', dense ? '' : 'pa-10', black ? 'opacity-6' : '']"
|
||||
></text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<text :style="{
|
||||
fontSize: sizes,
|
||||
}" class="icons "
|
||||
:class="[prefx_computed, black_tmeme ? 'bk' : '', iconName, colorTheme ? colors : '', dense ? '' : 'pa-10', black ? 'opacity-6' : '']"></text>
|
||||
<!-- #endif -->
|
||||
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 图标组件
|
||||
* @property {Boolean} dense = [true|false] 默认false,是否去除边距
|
||||
* @property {String} prefx = [iconfont] 默认iconfont,默认图标的前缀,对自定义图标时有好处。
|
||||
* @property {String} name = [] 默认'',图标名称,注意不带前缀。
|
||||
* @property {String | Number} size = [] 默认28, 图标大小,单位是upx
|
||||
* @property {String} color = [primary] 默认primary, 图标主题颜色名
|
||||
* @property {Function} click 图标点击事件。
|
||||
* @example <tm-icons name='icon-clear'></tm-icons>
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
dense: {
|
||||
//是否小边距
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
black: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
prefx: {
|
||||
type: String, //前缀
|
||||
default: 'iconfont'
|
||||
},
|
||||
name: {
|
||||
type: String, //图标名称。
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String | Number, //图标名称。
|
||||
default: 28
|
||||
},
|
||||
color: {
|
||||
type: String, //颜色名称或者颜色值。
|
||||
default: 'primary'
|
||||
},
|
||||
//强制转换图标类型,不通过内置判定,解决自己引用图片svg图标时当作字体图标的错误。
|
||||
iconType: {
|
||||
type: String,
|
||||
default: '' //img|icon
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme: {
|
||||
type: Boolean | String,
|
||||
default: false
|
||||
/**
|
||||
* 图标组件
|
||||
* @property {Boolean} dense = [true|false] 默认false,是否去除边距
|
||||
* @property {String} prefx = [iconfont] 默认iconfont,默认图标的前缀,对自定义图标时有好处。
|
||||
* @property {String} name = [] 默认'',图标名称,注意不带前缀。
|
||||
* @property {String | Number} size = [] 默认28, 图标大小,单位是upx
|
||||
* @property {String} color = [primary] 默认primary, 图标主题颜色名
|
||||
* @property {Function} click 图标点击事件。
|
||||
* @example <tm-icons name='icon-clear'></tm-icons>
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
dense: {
|
||||
//是否小边距
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
black: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
prefx: {
|
||||
type: String, //前缀
|
||||
default: 'iconfont'
|
||||
},
|
||||
name: {
|
||||
type: String, //图标名称。
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String | Number, //图标名称。
|
||||
default: 28
|
||||
},
|
||||
color: {
|
||||
type: String|null, //颜色名称或者颜色值。
|
||||
default: 'primary'
|
||||
},
|
||||
//强制转换图标类型,不通过内置判定,解决自己引用图片svg图标时当作字体图标的错误。
|
||||
iconType: {
|
||||
type: String,
|
||||
default: '' //img|icon
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme: {
|
||||
type: Boolean | String,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName: function() {
|
||||
// #ifdef APP-NVUE || APP-PLUS-NVUE
|
||||
let fontList = require('@/tm-vuetify/scss/iconfonts/iconfont.json');
|
||||
let name = this.name.replace('icon-', '');
|
||||
|
||||
// fontList.glyphs
|
||||
let itemIcon = fontList.glyphs.find((item, index) => {
|
||||
return item.font_class == name;
|
||||
});
|
||||
return eval('"\\u' + itemIcon.unicode + '"');
|
||||
// #endif
|
||||
return this.name;
|
||||
},
|
||||
prefx_computed() {
|
||||
let prefix = this.name.split('-')[0];
|
||||
if (prefix == 'icon') return 'iconfont';
|
||||
if (prefix == 'mdi') return 'mdi';
|
||||
|
||||
return prefix;
|
||||
},
|
||||
black_tmeme: function() {
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
vtype: function() {
|
||||
if (this.name[0] == '.' || this.name[0] == '/' || this.name.substring(0, 4) == 'http' || this.name.substring(0, 5) == 'https' || this.name.substring(0, 3) == 'ftp') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
sizes: function() {
|
||||
if (typeof this.size === 'string') {
|
||||
if (/[rpx|upx|rem|em|vx|vh|px]$/.test(this.size)) {
|
||||
return this.size;
|
||||
}
|
||||
return uni.upx2px(parseInt(this.size)) + 'px';
|
||||
}
|
||||
if (typeof this.size === 'number' && !isNaN(this.size)) {
|
||||
return uni.upx2px(this.size) + 'px';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName: function() {
|
||||
// #ifdef APP-NVUE || APP-PLUS-NVUE
|
||||
let fontList = require('@/tm-vuetify/scss/iconfonts/iconfont.json');
|
||||
let name = this.name.replace('icon-', '');
|
||||
|
||||
// fontList.glyphs
|
||||
let itemIcon = fontList.glyphs.find((item, index) => {
|
||||
return item.font_class == name;
|
||||
})
|
||||
return eval('"\\u' + itemIcon.unicode + '"');
|
||||
// #endif
|
||||
return this.name;
|
||||
},
|
||||
prefx_computed(){
|
||||
let prefix = this.name.split('-')[0];
|
||||
if(prefix=='icon') return 'iconfont';
|
||||
if(prefix=='mdi') return 'mdi';
|
||||
|
||||
return prefix;
|
||||
},
|
||||
black_tmeme: function() {
|
||||
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
vtype: function() {
|
||||
if (this.name[0] == "." ||
|
||||
this.name[0] == "/" ||
|
||||
this.name.substring(0, 4) == 'http' ||
|
||||
this.name.substring(0, 5) == 'https' ||
|
||||
this.name.substring(0, 3) == 'ftp'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
sizes: function() {
|
||||
if (typeof this.size === 'string') {
|
||||
if (/[rpx|upx|rem|em|vx|vh|px]$/.test(this.size)) {
|
||||
return this.size;
|
||||
}
|
||||
return uni.upx2px(parseInt(this.size)) + 'px';
|
||||
}
|
||||
if (typeof this.size === 'number' && !isNaN(this.size)) {
|
||||
return uni.upx2px(this.size) + 'px';
|
||||
}
|
||||
},
|
||||
color_tmeme: function() {
|
||||
|
||||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
|
||||
.fllowTheme) {
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
colors: {
|
||||
get: function() {
|
||||
if (!this.color_tmeme) return 'text-primary';
|
||||
if (!this.$TestColor(this.color_tmeme)) {
|
||||
return this.color_tmeme;
|
||||
}
|
||||
return 'text-' + this.color_tmeme;
|
||||
},
|
||||
set: function() {
|
||||
if (!this.$TestColor(this.color_tmeme)) {
|
||||
this.colorTheme = false;
|
||||
return this.color_tmeme;
|
||||
}
|
||||
this.colorTheme = true;
|
||||
}
|
||||
color_tmeme: function() {
|
||||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorTheme: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onclick(e) {
|
||||
this.$emit('click', e);
|
||||
colors: {
|
||||
get: function() {
|
||||
if (!this.color_tmeme) return 'text-primary';
|
||||
if (!this.$TestColor(this.color_tmeme)) {
|
||||
return this.color_tmeme;
|
||||
}
|
||||
return 'text-' + this.color_tmeme;
|
||||
},
|
||||
set: function() {
|
||||
if (!this.$TestColor(this.color_tmeme)) {
|
||||
this.colorTheme = false;
|
||||
return this.color_tmeme;
|
||||
}
|
||||
this.colorTheme = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorTheme: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onclick(e) {
|
||||
this.$emit('click', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-icons {
|
||||
vertical-align: middle;
|
||||
|
||||
.icons {
|
||||
&.black {
|
||||
color: #fff;
|
||||
}
|
||||
.tm-icons {
|
||||
display: inline-block;
|
||||
.tm-icons-item{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.icons {
|
||||
&.black {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<view v-if="title" class="d-inline-block "
|
||||
:style="{fontSize:title_size}"
|
||||
:class="[titleClass,black_tmeme?'bk text-grey-lighten-3':'']">
|
||||
<text v-if="required" class="text-red">*</text>
|
||||
<text v-if="_required" class="text-red">*</text>
|
||||
<slot name="default" :title="title">
|
||||
{{title}}
|
||||
</slot>
|
||||
@@ -368,6 +368,9 @@
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
_required(){
|
||||
return this.required
|
||||
},
|
||||
height_rpx:function(){
|
||||
return this.height;
|
||||
},
|
||||
@@ -430,7 +433,7 @@
|
||||
set:function(val){
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:value', val)
|
||||
if (this.required) {
|
||||
if (this._required) {
|
||||
this.$nextTick(function(){
|
||||
this.verifyInput();
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- 列表项目,类似单元格。 -->
|
||||
<template>
|
||||
<view class="tm-listitem ">
|
||||
<view class="tm-listitem " :hover-class="url?'opacity-6':''">
|
||||
<view
|
||||
|
||||
@click="click"
|
||||
@@ -280,9 +280,15 @@ export default {
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.leftIconColor;
|
||||
},
|
||||
groupPublickStyle:function(){
|
||||
if(!this.GroupListStyles) return null
|
||||
return this.GroupListStyles()
|
||||
}
|
||||
},
|
||||
|
||||
inject:{
|
||||
GroupListStyles:{default:null}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pz_theme: {
|
||||
@@ -296,13 +302,25 @@ export default {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.pz_themeCus = {
|
||||
margin: this.margin,
|
||||
padding: this.padding,
|
||||
shadow: this.shadow,
|
||||
round: this.round,
|
||||
borderBottom: this.borderBottom
|
||||
};
|
||||
if(this.groupPublickStyle){
|
||||
this.pz_themeCus = {
|
||||
margin: this.groupPublickStyle.margin,
|
||||
padding: this.groupPublickStyle.padding,
|
||||
shadow: this.groupPublickStyle.shadow,
|
||||
round: this.groupPublickStyle.round,
|
||||
borderBottom: this.groupPublickStyle.borderBottom||this.borderBottom
|
||||
};
|
||||
}else{
|
||||
this.pz_themeCus = {
|
||||
margin: this.margin,
|
||||
padding: this.padding,
|
||||
shadow: this.shadow,
|
||||
round: this.round,
|
||||
borderBottom: this.borderBottom
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
<text class="iconfont icon-angle-left" :class="[`text-${fontColorTheme}`]" :style="{ fontSize: '28rpx' }"></text>
|
||||
</navigator>
|
||||
</block>
|
||||
|
||||
<slot name="left" :data="{ style: widths, isTransparent: isTransparent, title: title }"></slot>
|
||||
</view>
|
||||
<view class="center flex-center text-size-g text-overflow text-align-center" :class="[`text-${fontColorTheme}`]">
|
||||
@@ -36,6 +35,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -61,6 +61,9 @@
|
||||
components: {
|
||||
tmIcons
|
||||
},
|
||||
options:{
|
||||
multipleSlots: true
|
||||
},
|
||||
name: 'tm-menubars',
|
||||
props: {
|
||||
// 是否开启暗黑模式
|
||||
|
||||
@@ -109,18 +109,12 @@ import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||||
mounted() {
|
||||
this.$nextTick(function(){
|
||||
this.downOpen = this.open;
|
||||
|
||||
let t = this;
|
||||
|
||||
t.$Querey('.tm-more-content',t).then(syninfo=>{
|
||||
if (syninfo[0].height - 40 <= t.hs) {
|
||||
t.show = false;
|
||||
}
|
||||
}).catch(e => {});
|
||||
|
||||
|
||||
this.getRect()
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
this.getRect()
|
||||
},
|
||||
computed: {
|
||||
hs: function() {
|
||||
return uni.upx2px(this.maxHeight) || 100;
|
||||
@@ -131,6 +125,14 @@ import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRect(){
|
||||
let t = this;
|
||||
t.$Querey('.tm-more-content',t,0).then(syninfo=>{
|
||||
if (syninfo[0].height - 40 <= t.hs) {
|
||||
t.show = false;
|
||||
}
|
||||
}).catch(e => {});
|
||||
},
|
||||
openMore() {
|
||||
this.$emit('click');
|
||||
if (this.disabled) return;
|
||||
|
||||
@@ -232,7 +232,7 @@
|
||||
this.aniData = '';
|
||||
let aniData = uni.createAnimation({
|
||||
duration:240,
|
||||
timingFunction: 'linear',
|
||||
timingFunction: 'ease',
|
||||
})
|
||||
this.aniData = aniData;
|
||||
if(pos=='bottom'){
|
||||
@@ -327,15 +327,15 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
&.blur {
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
&.on {
|
||||
animation: opta 1s linear;
|
||||
animation: opta 1s ease;
|
||||
}
|
||||
|
||||
&.off {
|
||||
animation: opta_off 0.35s linear;
|
||||
animation: opta_off 0.24s ease;
|
||||
}
|
||||
.tm-poup-wk {
|
||||
position: absolute;
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
@keyframes opta {
|
||||
from {
|
||||
opacity: 0.6;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -495,7 +495,7 @@
|
||||
@keyframes Centerleft {
|
||||
from {
|
||||
transform: scale(0.65);
|
||||
opacity: 0.65;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -512,7 +512,7 @@
|
||||
|
||||
to {
|
||||
transform: scale(0.65);
|
||||
opacity: 0.65;
|
||||
opacity: 0.3;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,19 +166,25 @@ export default {
|
||||
destroyed() {
|
||||
clearInterval(this.tmiddd)
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
this.$nextTick(async function(){
|
||||
let p = await this.$Querey(".tm-propress",this).catch(e=>{})
|
||||
|
||||
this.width_upx = p[0].width+'px';
|
||||
if(this.loading){
|
||||
await this.startAni();
|
||||
}
|
||||
})
|
||||
mounted() {
|
||||
this.getRect()
|
||||
|
||||
},
|
||||
updated() {
|
||||
this.getRect()
|
||||
},
|
||||
methods: {
|
||||
getRect(){
|
||||
let t =this
|
||||
this.$Querey(".tm-propress",this,0).then((p)=>{
|
||||
if(!p) return;
|
||||
if(!p[0].width) return;
|
||||
t.width_upx = p[0].width+'px';
|
||||
if(t.loading){
|
||||
t.startAni();
|
||||
}
|
||||
}).catch(e=>{})
|
||||
},
|
||||
async startAni(){
|
||||
// clearInterval(this.tmiddd)
|
||||
let t = this;
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<view @click="$emit('click',$event)" :gutter="gutter" class="tm--row" :class="[preatClass]" >
|
||||
<view class="tm--row--body" :style="style" :class="[customClass]">
|
||||
<view v-show="chuliWsok==true">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -64,30 +61,34 @@
|
||||
width_px:0,
|
||||
children_num:0,
|
||||
style:'',
|
||||
chuliWsok:false,//处理完宽度计算信息再进行显示内部内容。
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
let t = this;
|
||||
|
||||
await this.$Querey('.tm--row',this).then(preantw=>{
|
||||
t.width_px = preantw[0].width;
|
||||
// #ifndef H5
|
||||
t.children_num = t.$children.length;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
t.children_num = t.$children[0].$children[0].$children[0].$children.length;
|
||||
// #endif
|
||||
t.style = uni.$tm.objToString({
|
||||
'justify-content':t.justify,
|
||||
'align-items':t.align,
|
||||
'width':t.width,
|
||||
'height':!t.height?'default':(uni.upx2px(t.height)+'px')
|
||||
},';');
|
||||
|
||||
t.chuliWsok = true;
|
||||
}).catch(e=>{})
|
||||
|
||||
updated() {
|
||||
this.getContinaRect()
|
||||
},
|
||||
mounted() {
|
||||
this.getContinaRect()
|
||||
},
|
||||
methods:{
|
||||
getContinaRect(){
|
||||
let t = this;
|
||||
this.$Querey('.tm--row',this).then(preantw=>{
|
||||
t.width_px = preantw[0].width;
|
||||
// #ifndef H5
|
||||
t.children_num = t.$children.length;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
t.children_num = t.$children[0].$children[0].$children[0].$children.length;
|
||||
// #endif
|
||||
t.style = uni.$tm.objToString({
|
||||
'justify-content':t.justify,
|
||||
'align-items':t.align,
|
||||
'width':t.width,
|
||||
'height':!t.height?'default':(uni.upx2px(t.height)+'px')
|
||||
},';');
|
||||
|
||||
}).catch(e=>{})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -191,10 +191,10 @@
|
||||
},
|
||||
mounted() {
|
||||
let t = this;
|
||||
uni.$tm.sleep(30).then(()=>{
|
||||
t.setInits();
|
||||
|
||||
})
|
||||
t.setInits();
|
||||
},
|
||||
updated() {
|
||||
this.setInits();
|
||||
},
|
||||
methods: {
|
||||
setInits() {
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
]"
|
||||
|
||||
>
|
||||
<view class="fulled" v-if="showSheet">
|
||||
<view class="fulled" >
|
||||
<slot name="default"></slot>
|
||||
</view>
|
||||
</view>
|
||||
@@ -151,25 +151,7 @@ export default {
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSheet:true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// #ifdef APP-VUE || APP-PLUS || MP
|
||||
this.showSheet = false;
|
||||
// #endif
|
||||
},
|
||||
mounted() {
|
||||
let t= this;
|
||||
|
||||
// #ifdef APP-VUE || APP-PLUS || MP
|
||||
setTimeout(function() {
|
||||
t.showSheet = true;
|
||||
}, 30);
|
||||
// #endif
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
@touchstart="touchstart"
|
||||
@touchmove.stop.prevent="touchsmove"
|
||||
@touchend="touchsend"
|
||||
|
||||
@mousedown="touchstart"
|
||||
@mousemove.stop.prevent="touchsmove"
|
||||
@mouseup="touchsend"
|
||||
|
||||
@@ -244,6 +244,17 @@
|
||||
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
||||
});
|
||||
},
|
||||
async updated() {
|
||||
this.$nextTick(async function() {
|
||||
await this.getwidth();
|
||||
if (Math.abs(this.value) > Math.abs(this.max)) {
|
||||
this.isError = true;
|
||||
return;
|
||||
}
|
||||
let rdl = this.sliderWidth * (Math.abs(this.value) / Math.abs(this.max));
|
||||
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
barStart(e) {
|
||||
|
||||
@@ -306,7 +317,7 @@
|
||||
|
||||
},
|
||||
async getwidth() {
|
||||
let res = await this.$Querey('.tm-slider-id', this).catch(e=>{});
|
||||
let res = await this.$Querey('.tm-slider-id', this,0).catch(e=>{});
|
||||
res[0].width = res[0].width||uni.upx2px(this.width);
|
||||
res[0].height = res[0].height||uni.upx2px(this.height);
|
||||
if (this.showLeft === false && this.showRight === false) {
|
||||
|
||||
@@ -297,6 +297,20 @@
|
||||
this.barLeft_1 = rdl_1 >= this.sliderWidth || rdl_1 < 0 ? this.sliderWidth : rdl_1;
|
||||
});
|
||||
},
|
||||
updated() {
|
||||
this.$nextTick(async function() {
|
||||
await this.getwidth();
|
||||
|
||||
if (Math.abs(this.value[1]) > Math.abs(this.max)) {
|
||||
this.isError = true;
|
||||
return;
|
||||
}
|
||||
let rdl = this.sliderWidth * (Math.abs(this.value[0]) / Math.abs(this.max));
|
||||
this.barLeft = rdl >= this.sliderWidth || rdl < 0 ? this.sliderWidth : rdl;
|
||||
let rdl_1 = this.sliderWidth * (Math.abs(this.value[1]) / Math.abs(this.max));
|
||||
this.barLeft_1 = rdl_1 >= this.sliderWidth || rdl_1 < 0 ? this.sliderWidth : rdl_1;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
barStart(e) {
|
||||
if (this.disabled || this.isError) return;
|
||||
@@ -407,7 +421,7 @@
|
||||
},
|
||||
|
||||
async getwidth() {
|
||||
let res = await this.$Querey('.tm-slider-id', this).catch(e=>{});
|
||||
let res = await this.$Querey('.tm-slider-id', this,0).catch(e=>{});
|
||||
res[0].width = res[0].width||uni.upx2px(this.width);
|
||||
res[0].height = res[0].height||uni.upx2px(this.height);
|
||||
|
||||
|
||||
@@ -1,83 +1,43 @@
|
||||
<template>
|
||||
<view class="tm-swiper " :class="[inline ? 'd-inline-block' : '']">
|
||||
<swiper
|
||||
:previous-margin="`${ani3d}rpx`"
|
||||
:next-margin="`${ani3d}rpx`"
|
||||
:style="{
|
||||
<swiper :previous-margin="`${ani3d}rpx`" :next-margin="`${ani3d}rpx`" :style="{
|
||||
width: w_s + 'rpx',
|
||||
height: h_s + 'rpx'
|
||||
}"
|
||||
:vertical="vertical"
|
||||
:autoplay="autoplay && !isPlayVedio"
|
||||
:circular="circular"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:indicator-active-color="color_tmeme"
|
||||
:current="nowIndex"
|
||||
@change="change"
|
||||
>
|
||||
}" :vertical="vertical" :autoplay="autoplay&&!isPlayVedio" :circular="circular" :interval="interval" :duration="duration"
|
||||
:indicator-active-color="color_tmeme" :current="nowIndex" @change="change" :class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
|
||||
<block v-for="(item, index) in dataList" :key="index">
|
||||
<swiper-item
|
||||
:style="{
|
||||
<swiper-item :style="{
|
||||
width: w_s + 'rpx',
|
||||
height: h_s + 'rpx'
|
||||
}"
|
||||
class="shadow-24"
|
||||
:class="[round_num > 0 ? ` round-${round_num} overflow` : '']"
|
||||
>
|
||||
}" class="shadow-24" :class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
|
||||
<view
|
||||
:class="[
|
||||
nowIndex !== index && ani3d > 0 ? 'a3d' : '',
|
||||
round_num > 0 ? ` round-${round_num} overflow` : '',
|
||||
nowIndex < index && ani3d > 0 ? 'a3dL' : '',
|
||||
nowIndex > index && ani3d > 0 ? 'a3dR' : ''
|
||||
]"
|
||||
class="tm-swiper-ik fulled fulled-height"
|
||||
:key="index"
|
||||
>
|
||||
:class="[nowIndex !== index&&ani3d>0?'a3d':'',round_num > 0 ? ` round-${round_num} overflow` : '',nowIndex<index&&ani3d>0?'a3dL':'',nowIndex>index&&ani3d>0?'a3dR':'']"
|
||||
class="tm-swiper-ik fulled fulled-height" :key="index">
|
||||
<view class="actvieMarginDh">
|
||||
<view class="actvieMarginDh-item" :class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
|
||||
<image
|
||||
v-if="item.dtype != 'video'"
|
||||
@click="itemClick(item)"
|
||||
:style="{
|
||||
<view class="actvieMarginDh-item"
|
||||
:class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
|
||||
<image v-if="item.dtype!='video'" @click="itemClick(item)" :style="{
|
||||
height: h_s + 'rpx',
|
||||
width: w_s - margin_px + 'rpx'
|
||||
}"
|
||||
@load="imgload($event, index)"
|
||||
:src="item.url"
|
||||
:class="[round_num > 0 ? ` round-${round_num} overflow` : '']"
|
||||
></image>
|
||||
<video
|
||||
@play="isPlayVedio = true"
|
||||
@pause="isPlayVedio = false"
|
||||
@ended="isPlayVedio = false"
|
||||
:autoplay="nowIndex == index ? true : false"
|
||||
:style="{
|
||||
width: (w_s - margin_px) + 'rpx'
|
||||
}" @load="imgload($event, index)" :src="item.url"
|
||||
:class="[round_num > 0 ? ` round-${round_num} overflow` : '']"></image>
|
||||
<video @play="isPlayVedio = true" @pause="isPlayVedio=false" @ended="isPlayVedio=false" :autoplay="nowIndex == index?true:false" :style="{
|
||||
height: h_s + 'rpx',
|
||||
width: w_s - margin_px + 'rpx'
|
||||
}"
|
||||
v-if="item.dtype == 'video'"
|
||||
:src="item.url"
|
||||
></video>
|
||||
width: (w_s - margin_px) + 'rpx'
|
||||
}" v-if="item.dtype=='video'" :src="item.url"></video>
|
||||
|
||||
<view
|
||||
v-if="item.title"
|
||||
:style="{
|
||||
width: w_s - margin_px + 'rpx'
|
||||
}"
|
||||
class="flex-start relative "
|
||||
>
|
||||
<view v-if="item.title" :style="{
|
||||
width: (w_s - margin_px) + 'rpx'
|
||||
}" class="flex-start relative ">
|
||||
<view
|
||||
class="text-size-s px-16 absolute b-0 l-0 zIndex-14 flex-start text-overflow text-white"
|
||||
:style="{
|
||||
height: '66rpx',
|
||||
width: w_s - margin_px - 32 + 'rpx',
|
||||
lineHeight: '66rpx',
|
||||
background: 'rgba(0,0,0,0.4)'
|
||||
}"
|
||||
>
|
||||
{{ item.title }}
|
||||
height: '66rpx',
|
||||
width: (w_s - margin_px-32) + 'rpx',
|
||||
lineHeight:'66rpx',
|
||||
background:'rgba(0,0,0,0.4)'
|
||||
}">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -86,24 +46,19 @@
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view class="tm-swiper-dot" v-if="indicatorDots && nowshowDot" :class="[dotDirection]">
|
||||
<view class="tm-swiper-dot" v-if="indicatorDots&&nowshowDot" :class="[dotDirection]">
|
||||
|
||||
<block v-if="dotModel != 'round'">
|
||||
<view
|
||||
@click="nowIndex = index"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
<view @click="nowIndex = index" v-for="(item, index) in dataList" :key="index"
|
||||
class="tm-swiper-dot-item flex-center mx-8"
|
||||
:class="[nowIndex == index ? color_tmeme : 'unactive', dotModel]"
|
||||
>
|
||||
:class="[nowIndex == index ? color_tmeme : 'unactive', dotModel]">
|
||||
<text v-if="dotModel === 'number'" class="text-size-xs">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="dotModel == 'round'">
|
||||
<view
|
||||
:class="[dotModel]"
|
||||
<view :class="[dotModel]"
|
||||
class="text-size-xs balck text-white round-24 px-24 tm-swiper-dot-item flex-center flex-shrink"
|
||||
:style="{ height: '40rpx', minWidth: '60rpx' }"
|
||||
>
|
||||
:style="{ height: '40rpx', minWidth: '60rpx' }">
|
||||
{{ nowIndex + 1 + '/' + dataList.length }}
|
||||
</view>
|
||||
</block>
|
||||
@@ -112,353 +67,357 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 图片轮播
|
||||
* @description 很参数与原官方相同。
|
||||
* @property {Number} width = [] 默认:0,轮播宽度,0为自己计算。
|
||||
* @property {Number} height = [] 默认:0,轮播高度,0为自己计算。
|
||||
* @property {Array} list = [] 默认:[],图片列表,可以是string数组或者object数组。
|
||||
* @property {String} rang-key = [] 默认:[],图片列表object数组时,需要提供图片地址 的键值。
|
||||
* @property {Boolean} inline = [] 默认:false,是否内联,方便一排放多个轮播组件。
|
||||
* @property {Boolean} previmage = [] 默认:true,是否预览图片,点击图片时,放大预览。
|
||||
* @property {Boolean} vertical = [] 默认:false,是否竖向滚动。
|
||||
* @property {Boolean} circular = [] 默认:false,是否采用衔接滑动,即播放到末尾后重新回到开头
|
||||
* @property {Boolean} autoplay = [] 默认:false,是否自动切换
|
||||
* @property {Number} interval = [] 默认:3000,自动切换时间间隔
|
||||
* @property {Number} duration = [] 默认:500,滑动动画时长
|
||||
* @property {Number} ani3d = [] 默认:0,开启3d缩放动画
|
||||
* @property {Boolean} indicator-dots = [] 默认:true,是否显示指示
|
||||
* @property {String} color = [] 默认:primary,指示点的主题色。
|
||||
* @property {Number} current = [] 默认:0,如果需要双向绑定请使用current.sync.
|
||||
* @property {String} dot-model = [dot|number|rect|round] 默认:dot,指示点的类型。
|
||||
* @property {String} dot-direction = [left|center|right] 默认:center,指示点的位置。
|
||||
* @property {Number} round = [] 默认:0,圆角,单位rpx
|
||||
* @property {Number} margin = [] 默认:0,单位rpx
|
||||
* @property {Function} change 轮播切换时触发。参数返回当前播放位置。
|
||||
* @property {Function} click 轮播项目被点击时触发发,返回项目数据
|
||||
* @example <tm-swiper :list="['https://picsum.photos/300?jv=3','https://picsum.photos/300?jv=3']" ></tm-swiper>
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-swiper',
|
||||
props: {
|
||||
width: {
|
||||
type: Number | String,
|
||||
default: 0
|
||||
},
|
||||
// 自定高度。
|
||||
height: {
|
||||
type: Number | String,
|
||||
default: 0
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
rangKey: {
|
||||
type: String,
|
||||
default: 'src'
|
||||
},
|
||||
// 是否内联。
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否开启预览模式,即点击图片可以预览。
|
||||
previmage: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
},
|
||||
vertical: false,
|
||||
circular: false,
|
||||
autoplay: false,
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
// 是否显示指示
|
||||
indicatorDots: false,
|
||||
//指示点的主题色。
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 当前位置。
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
ani3d: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 指示点的类型。
|
||||
dotModel: {
|
||||
type: String,
|
||||
default: 'dot' //dot|number|rect
|
||||
},
|
||||
// 指示点的位置 。
|
||||
dotDirection: {
|
||||
type: String,
|
||||
default: 'center' //left|center|right
|
||||
},
|
||||
round: {
|
||||
type: Boolean | Number,
|
||||
default: 0
|
||||
},
|
||||
margin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
current: function(newval) {
|
||||
// if (newval >= this.dataList.length) {
|
||||
// this.nowIndex = 0;
|
||||
// return;
|
||||
// }
|
||||
// this.nowIndex = newval;
|
||||
},
|
||||
list: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.chulidata();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
color_tmeme: function() {
|
||||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
round_num: function() {
|
||||
if (typeof this.round === 'boolean') return 0;
|
||||
return this.round;
|
||||
},
|
||||
nowIndex: {
|
||||
get: function() {
|
||||
return this.dotIndex;
|
||||
/**
|
||||
* 图片轮播
|
||||
* @description 很参数与原官方相同。
|
||||
* @property {Number} width = [] 默认:0,轮播宽度,0为自己计算。
|
||||
* @property {Number} height = [] 默认:0,轮播高度,0为自己计算。
|
||||
* @property {Array} list = [] 默认:[],图片列表,可以是string数组或者object数组。
|
||||
* @property {String} rang-key = [] 默认:[],图片列表object数组时,需要提供图片地址 的键值。
|
||||
* @property {Boolean} inline = [] 默认:false,是否内联,方便一排放多个轮播组件。
|
||||
* @property {Boolean} previmage = [] 默认:true,是否预览图片,点击图片时,放大预览。
|
||||
* @property {Boolean} vertical = [] 默认:false,是否竖向滚动。
|
||||
* @property {Boolean} circular = [] 默认:false,是否采用衔接滑动,即播放到末尾后重新回到开头
|
||||
* @property {Boolean} autoplay = [] 默认:false,是否自动切换
|
||||
* @property {Number} interval = [] 默认:3000,自动切换时间间隔
|
||||
* @property {Number} duration = [] 默认:500,滑动动画时长
|
||||
* @property {Number} ani3d = [] 默认:0,开启3d缩放动画
|
||||
* @property {Boolean} indicator-dots = [] 默认:true,是否显示指示
|
||||
* @property {String} color = [] 默认:primary,指示点的主题色。
|
||||
* @property {Number} current = [] 默认:0,如果需要双向绑定请使用current.sync.
|
||||
* @property {String} dot-model = [dot|number|rect|round] 默认:dot,指示点的类型。
|
||||
* @property {String} dot-direction = [left|center|right] 默认:center,指示点的位置。
|
||||
* @property {Number} round = [] 默认:0,圆角,单位rpx
|
||||
* @property {Number} margin = [] 默认:0,单位rpx
|
||||
* @property {Function} change 轮播切换时触发。参数返回当前播放位置。
|
||||
* @property {Function} click 轮播项目被点击时触发发,返回项目数据
|
||||
* @example <tm-swiper :list="['https://picsum.photos/300?jv=3','https://picsum.photos/300?jv=3']" ></tm-swiper>
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-swiper',
|
||||
props: {
|
||||
width: {
|
||||
type: Number | String,
|
||||
default: 0
|
||||
},
|
||||
set: function(val) {
|
||||
this.dotIndex = val;
|
||||
this.$emit('update:current', val);
|
||||
this.$emit('change', val);
|
||||
}
|
||||
},
|
||||
nowshowDot: function() {
|
||||
return this.showdot();
|
||||
},
|
||||
w_s: {
|
||||
get: function() {
|
||||
return this.w_w;
|
||||
// 自定高度。
|
||||
height: {
|
||||
type: Number | String,
|
||||
default: 0
|
||||
},
|
||||
set: function(val) {
|
||||
this.w_w = val;
|
||||
}
|
||||
},
|
||||
h_s: {
|
||||
get: function() {
|
||||
return this.h_h;
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
set: function(val) {
|
||||
this.h_h = val;
|
||||
rangKey: {
|
||||
type: String,
|
||||
default: 'src'
|
||||
},
|
||||
// 是否内联。
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否开启预览模式,即点击图片可以预览。
|
||||
previmage: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
},
|
||||
vertical: false,
|
||||
circular: false,
|
||||
autoplay: false,
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
// 是否显示指示
|
||||
indicatorDots: false,
|
||||
//指示点的主题色。
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 当前位置。
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
ani3d: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 指示点的类型。
|
||||
dotModel: {
|
||||
type: String,
|
||||
default: 'dot' //dot|number|rect
|
||||
},
|
||||
// 指示点的位置 。
|
||||
dotDirection: {
|
||||
type: String,
|
||||
default: 'center' //left|center|right
|
||||
},
|
||||
round: {
|
||||
type: Boolean | Number,
|
||||
default: 0
|
||||
},
|
||||
margin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
margin_px: function() {
|
||||
return this.margin * 2;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
w_w: 0,
|
||||
h_h: 0,
|
||||
dataList: [],
|
||||
dotIndex: 0,
|
||||
isPlayVedio: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
// this.nowIndex = this.current;
|
||||
|
||||
let w = this.width;
|
||||
if (String(w).indexOf('px') > -1 && typeof w == 'string') {
|
||||
let p = parseInt(h);
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
w = p * sy;
|
||||
}
|
||||
if (typeof w == 'string') {
|
||||
w = parseInt(w);
|
||||
}
|
||||
this.w_w = w;
|
||||
|
||||
let h = this.height;
|
||||
if (String(h).indexOf('px') > -1 && typeof h == 'string') {
|
||||
let p = parseInt(h);
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
h = p * sy;
|
||||
}
|
||||
if (typeof h == 'string') {
|
||||
h = parseInt(h);
|
||||
}
|
||||
|
||||
this.h_h = h;
|
||||
|
||||
this.$nextTick(async function() {
|
||||
await this.chulidata();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
showdot() {
|
||||
if (typeof this.dataList[this.nowIndex] == 'string') return true;
|
||||
if (typeof this.dataList[this.nowIndex] == 'object') {
|
||||
if (this.dataList[this.nowIndex].dtype == 'video') return false;
|
||||
watch: {
|
||||
current: function(newval) {
|
||||
if (newval >= this.dataList.length) {
|
||||
this.nowIndex = 0;
|
||||
return;
|
||||
}
|
||||
this.nowIndex = newval;
|
||||
},
|
||||
list: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.chulidata();
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
async chulidata() {
|
||||
let t = this;
|
||||
let tb = await this.$Querey('.tm-swiper', this).catch(ev => {});
|
||||
//console.log(uni.getSystemInfoSync());
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
let upxw = tb[0].width * sy;
|
||||
let sw = this.w_s > 0 ? this.w_s : upxw > 0 ? upxw : 100;
|
||||
this.w_s = sw;
|
||||
let sh = this.h_s > 0 ? this.h_s : tb[0].height > 0 ? tb[0].height : 300;
|
||||
this.h_s = sh;
|
||||
let d = [];
|
||||
this.list.forEach(item => {
|
||||
if (typeof item === 'string') {
|
||||
d.push({
|
||||
width: sw,
|
||||
height: sh,
|
||||
url: item,
|
||||
title: '',
|
||||
dtype: '',
|
||||
data: item
|
||||
});
|
||||
} else if (typeof item === 'object') {
|
||||
d.push({
|
||||
width: sw,
|
||||
height: sh,
|
||||
url: item[t.rangKey],
|
||||
title: item['title'] || '',
|
||||
dtype: item['type'] || '',
|
||||
data: item
|
||||
computed: {
|
||||
color_tmeme: function() {
|
||||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
|
||||
.fllowTheme) {
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
round_num: function() {
|
||||
if (typeof this.round === 'boolean') return 0;
|
||||
return this.round;
|
||||
},
|
||||
nowIndex: {
|
||||
get: function() {
|
||||
return this.dotIndex;
|
||||
},
|
||||
set: function(val) {
|
||||
this.dotIndex = val;
|
||||
this.$emit('update:current', val);
|
||||
this.$emit('change', val);
|
||||
}
|
||||
},
|
||||
nowshowDot:function(){
|
||||
return this.showdot();
|
||||
|
||||
},
|
||||
w_s: {
|
||||
get: function() {
|
||||
return this.w_w;
|
||||
},
|
||||
set: function(val) {
|
||||
this.w_w = val;
|
||||
}
|
||||
},
|
||||
h_s: {
|
||||
get: function() {
|
||||
return this.h_h;
|
||||
},
|
||||
set: function(val) {
|
||||
this.h_h = val;
|
||||
}
|
||||
},
|
||||
margin_px: function() {
|
||||
return this.margin * 2;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
w_w: 0,
|
||||
h_h: 0,
|
||||
dataList: [],
|
||||
dotIndex: 0,
|
||||
isPlayVedio:false,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.nowIndex = this.current;
|
||||
|
||||
let w = this.width;
|
||||
if (String(w).indexOf('px') > -1 && typeof w == 'string') {
|
||||
let p = parseInt(h);
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
w = p * sy;
|
||||
}
|
||||
if (typeof w == 'string') {
|
||||
w = parseInt(w);
|
||||
}
|
||||
this.w_w = w;
|
||||
|
||||
let h = this.height;
|
||||
if (String(h).indexOf('px') > -1 && typeof h == 'string') {
|
||||
let p = parseInt(h);
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
h = p * sy;
|
||||
}
|
||||
if (typeof h == 'string') {
|
||||
h = parseInt(h);
|
||||
}
|
||||
|
||||
this.h_h = h;
|
||||
|
||||
this.$nextTick(async function() {
|
||||
await this.chulidata();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
showdot(){
|
||||
if(typeof this.dataList[this.nowIndex]=='string') return true;
|
||||
if(typeof this.dataList[this.nowIndex]=='object'){
|
||||
if(this.dataList[this.nowIndex].dtype=='video') return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
async chulidata() {
|
||||
let t = this;
|
||||
let tb = await this.$Querey('.tm-swiper', this).catch(ev => {});
|
||||
//console.log(uni.getSystemInfoSync());
|
||||
let sy = 750 / uni.getSystemInfoSync().windowWidth;
|
||||
let upxw = tb[0].width * sy;
|
||||
let sw = this.w_s > 0 ? this.w_s : upxw > 0 ? upxw : 100;
|
||||
this.w_s = sw;
|
||||
let sh = this.h_s > 0 ? this.h_s : tb[0].height > 0 ? tb[0].height : 300;
|
||||
this.h_s = sh;
|
||||
let d = [];
|
||||
this.list.forEach(item => {
|
||||
if (typeof item === 'string') {
|
||||
d.push({
|
||||
width: sw,
|
||||
height: sh,
|
||||
url: item,
|
||||
title: '',
|
||||
dtype: '',
|
||||
data: item
|
||||
});
|
||||
} else if (typeof item === 'object') {
|
||||
d.push({
|
||||
width: sw,
|
||||
height: sh,
|
||||
url: item[t.rangKey],
|
||||
title: item['title'] || '',
|
||||
dtype: item['type'] || '',
|
||||
data: item
|
||||
});
|
||||
}
|
||||
});
|
||||
this.dataList = d;
|
||||
},
|
||||
imgload(e, index) {},
|
||||
change(event) {
|
||||
this.nowIndex = event.detail.current;
|
||||
},
|
||||
itemClick(e) {
|
||||
if (this.previmage) {
|
||||
uni.previewImage({
|
||||
current: e.url,
|
||||
urls: [e.url]
|
||||
});
|
||||
}
|
||||
});
|
||||
this.dataList = d;
|
||||
},
|
||||
imgload(e, index) {},
|
||||
change(event) {
|
||||
this.nowIndex = event.detail.current;
|
||||
},
|
||||
itemClick(e) {
|
||||
if (this.previmage) {
|
||||
uni.previewImage({
|
||||
current: e.url,
|
||||
urls: [e.url]
|
||||
});
|
||||
this.$emit('click', e);
|
||||
}
|
||||
this.$emit('click', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
<style lang="scss" scoped>
|
||||
.tm-swiper {
|
||||
position: relative;
|
||||
.tm-swiper {
|
||||
position: relative;
|
||||
|
||||
.tm-swiper-ik {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.a3d {
|
||||
transform: scale(0.76);
|
||||
}
|
||||
|
||||
.a3dL {
|
||||
transform: scale(0.76) translateX(-24rpx);
|
||||
}
|
||||
|
||||
.a3dR {
|
||||
transform: scale(0.76) translateX(24rpx);
|
||||
}
|
||||
|
||||
.actvieMarginDh {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.actvieMarginDh-item {
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tm-swiper-dot {
|
||||
.tm-swiper-dot-item {
|
||||
width: 16upx;
|
||||
height: 16upx;
|
||||
border-radius: 50%;
|
||||
|
||||
&.unactive {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&.number {
|
||||
width: 34upx;
|
||||
height: 34upx;
|
||||
}
|
||||
|
||||
&.rect {
|
||||
width: 24upx;
|
||||
height: 6upx;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.tm-swiper-ik {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
bottom: 20upx;
|
||||
.a3d {
|
||||
transform: scale(0.76);
|
||||
}
|
||||
|
||||
&.center {
|
||||
.a3dL {
|
||||
transform: scale(0.76) translateX(-24rpx)
|
||||
}
|
||||
|
||||
.a3dR {
|
||||
transform: scale(0.76) translateX(24rpx)
|
||||
}
|
||||
|
||||
.actvieMarginDh {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.actvieMarginDh-item {
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-left: 20upx;
|
||||
width: calc(100% - 20upx);
|
||||
}
|
||||
.tm-swiper-dot {
|
||||
.tm-swiper-dot-item {
|
||||
width: 16upx;
|
||||
height: 16upx;
|
||||
border-radius: 50%;
|
||||
|
||||
&.right {
|
||||
&.unactive {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&.number {
|
||||
width: 34upx;
|
||||
height: 34upx;
|
||||
}
|
||||
|
||||
&.rect {
|
||||
width: 24upx;
|
||||
height: 6upx;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20upx;
|
||||
width: calc(100% - 20upx);
|
||||
bottom: 20upx;
|
||||
|
||||
&.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-left: 20upx;
|
||||
width: calc(100% - 20upx);
|
||||
}
|
||||
|
||||
&.right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20upx;
|
||||
width: calc(100% - 20upx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* @property {Number} wait 延时
|
||||
* @property {String} animation-name = [fadeUp|fadeDown|fadeLeft|fadeRight|zoomIn|zoomOut|fadeIn|fadeOut] 动画效果名称.
|
||||
* @property {String|Boolean} auto = [true|false] 默认:true,是否自动播放动画.
|
||||
* @example <tm-translate wait="500" animation-name="fadeUp"><tm-upload></tm-upload></tm-translate>
|
||||
* @example <tm-translate wait="500" animation-name="fadeDown"><tm-upload></tm-upload></tm-translate>
|
||||
*/
|
||||
export default {
|
||||
name:"tm-translate",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="tm-upload flex-start " id="tm-upload">
|
||||
<view class="tm-upload flex-start relative" id="tm-upload">
|
||||
<view v-for="(item,index) in list" :key="index" class="tm-upload-item " :class="[grid!=1?'ma-4':'']" :style="{
|
||||
width:itemWidth+'px',
|
||||
height:itemHeight+'px'
|
||||
@@ -31,9 +31,18 @@
|
||||
<!-- 上传的进度。 -->
|
||||
<view v-if="item.progress>0&&item.progress!=100&&!disabled" class="tm-upload-pro green"
|
||||
:style="{width:item.progress+'%'}"></view>
|
||||
<!-- 上传的排序。 -->
|
||||
<view v-if="showSort" class="absolute l-0 fulled flex-between" :class="[disabled?'b-0':'b-40']" :style="{height:'46rpx'}">
|
||||
<view @click.stop="prevSort(item,index,'prev')" class="round-r-24 flex-center px-16 py-6" :class="[index==0?'opacity-0':'']" style="background-color: rgba(0, 0, 0, 0.3);">
|
||||
<tm-icons name="icon-angle-left" size="24" :color="color_tmeme"></tm-icons>
|
||||
</view>
|
||||
<view @click.stop="prevSort(item,index,'next')" class="round-l-24 flex-center px-16 py-6" :class="[index==list.length-1?'opacity-0':'']" style="background-color: rgba(0, 0, 0, 0.3);">
|
||||
<tm-icons name="icon-angle-right" size="24" :color="color_tmeme"></tm-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @click="addfile" v-if="list.length<max&&!disabled&&showSheet" class="tm-upload-item ma-4 grey-lighten-4 " :class="[`round-${round}`]" :style="{
|
||||
<view @click="addfile" v-if="list.length<max&&!disabled" class="tm-upload-item ma-4 grey-lighten-4 " :class="[`round-${round}`]" :style="{
|
||||
width:itemWidth+'px',
|
||||
height:itemHeight+'px'
|
||||
}">
|
||||
@@ -79,6 +88,10 @@
|
||||
components:{tmIcons},
|
||||
name: "tm-upload",
|
||||
props: {
|
||||
showSort:{
|
||||
type:Boolean|String,
|
||||
default:false
|
||||
},
|
||||
model:{
|
||||
type:String,
|
||||
default:'scaleToFill'
|
||||
@@ -216,8 +229,7 @@
|
||||
itemWidth: 0,
|
||||
itemHeight: 0,
|
||||
list: [],
|
||||
//兼容app使用.
|
||||
showSheet:true,
|
||||
|
||||
upObje:null,
|
||||
};
|
||||
},
|
||||
@@ -228,13 +240,51 @@
|
||||
},
|
||||
async mounted() {
|
||||
let t = this;
|
||||
if (typeof t.filelist === 'object' && Array.isArray(t.filelist)) {
|
||||
let plist = [...t.filelist];
|
||||
plist.forEach((item, index) => {
|
||||
let url = "";
|
||||
if (typeof item === 'string') {
|
||||
url = item;
|
||||
} else if (typeof item === 'object') {
|
||||
url = item[t.urlKey]
|
||||
}
|
||||
t.list.push({
|
||||
url: url,
|
||||
status: "上传成功",
|
||||
progress: 100,
|
||||
fileId: t.$tm.guid(),
|
||||
statusCode: 3,
|
||||
data: item,
|
||||
})
|
||||
})
|
||||
|
||||
this.$nextTick(async function(){
|
||||
}
|
||||
this.getRect()
|
||||
|
||||
this.$Querey('.tm-upload', this,30).then(o=>{
|
||||
// #ifdef APP-VUE || APP-PLUS || MP
|
||||
t.showSheet = true;
|
||||
// #endif
|
||||
|
||||
},
|
||||
updated() {
|
||||
this.getRect()
|
||||
},
|
||||
methods: {
|
||||
prevSort(item,index,type){
|
||||
if((index==0&&type=='prev')||(index==this.list.length-1&&type=='next')){
|
||||
return;
|
||||
}
|
||||
let nowindex = type=='prev'?index-1:index+1
|
||||
let nowItem = this.list[index];
|
||||
let newnowItem = this.list[nowindex];
|
||||
let nowfilelist= [...this.list]
|
||||
nowfilelist.splice(index,1,newnowItem)
|
||||
nowfilelist.splice(nowindex,1,nowItem)
|
||||
this.list = [...nowfilelist]
|
||||
this.$emit('update:filelist', nowfilelist);
|
||||
},
|
||||
getRect(){
|
||||
let t = this;
|
||||
this.$Querey('.tm-upload', this,0).then(o=>{
|
||||
if(!o[0].width&&t.maxWidth) return;
|
||||
t.maxWidth = o[0].width||t.width;
|
||||
let itemWidth = (t.maxWidth - (parseInt(t.grid) - 1) * uni.upx2px(12)) / parseInt(t.grid);
|
||||
t.itemWidth = itemWidth;
|
||||
@@ -242,33 +292,8 @@
|
||||
if (t.imgHeight > 0) {
|
||||
t.itemHeight = parseInt(uni.upx2px(t.imgHeight));
|
||||
}
|
||||
|
||||
if (typeof t.filelist === 'object' && Array.isArray(t.filelist)) {
|
||||
let plist = [...t.filelist];
|
||||
plist.forEach((item, index) => {
|
||||
let url = "";
|
||||
if (typeof item === 'string') {
|
||||
url = item;
|
||||
} else if (typeof item === 'object') {
|
||||
url = item[t.urlKey]
|
||||
}
|
||||
t.list.push({
|
||||
url: url,
|
||||
status: "上传成功",
|
||||
progress: 100,
|
||||
fileId: t.$tm.guid(),
|
||||
statusCode: 3,
|
||||
data: item,
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
errorFile(item,index){
|
||||
let id = item;
|
||||
id['loaderror'] = true;
|
||||
|
||||
@@ -134,8 +134,10 @@
|
||||
let day = nwod.getDate();
|
||||
let week = nwod.getDay();
|
||||
let new_weekDay = [nwod];
|
||||
|
||||
let timcha = Math.abs(week-7);
|
||||
let zcha = Math.abs(7-timcha);
|
||||
|
||||
let weekCn=["周日","周一","周二","周三","周四","周五","周六"];
|
||||
for(let i=1;i<zcha;i++){
|
||||
let d = new Date(year,month,day-i);
|
||||
@@ -157,9 +159,17 @@
|
||||
}
|
||||
weekDay.push(sc);
|
||||
}
|
||||
|
||||
weekDay.sort(function(a, b){return a.week - b.week});
|
||||
|
||||
weekDay.push(weekDay[0])
|
||||
weekDay.splice(0,1)
|
||||
if(weekDay.length==8){
|
||||
weekDay.splice(0,1)
|
||||
weekDay.unshift(weekDay[weekDay.length-1])
|
||||
weekDay.splice(weekDay.length-1,1)
|
||||
}
|
||||
|
||||
let t= this;
|
||||
this.timeList = [];
|
||||
this.$nextTick(function(){
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "tm-vuetify",
|
||||
"displayName": "tmUI-vuetify",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.1",
|
||||
"description": "tm-vuetify是一个新势力由主题驱动的UI组件库,相比其它优势大,组件全,设计趋势紧跟未来。具有主题生成,主题实时切换,暗黑实时切换,lottie动画,图表等新颖功能,tmui TMUI",
|
||||
"keywords": [
|
||||
"tmUI-vuetify",
|
||||
|
||||
@@ -9,20 +9,20 @@
|
||||
/**用户自定主题,默认主题,不可删除,可通过工具生成覆盖**/
|
||||
@import "./theme/amber.css";
|
||||
@import "./theme/blue.css";
|
||||
@import "./theme/brown.css";
|
||||
/* @import "./theme/brown.css"; */
|
||||
@import "./theme/cyan.css";
|
||||
@import "./theme/green.css";
|
||||
@import "./theme/indigo.css";
|
||||
@import "./theme/lime.css";
|
||||
/* @import "./theme/indigo.css"; */
|
||||
/* @import "./theme/lime.css"; */
|
||||
@import "./theme/orange.css";
|
||||
@import "./theme/pink.css";
|
||||
@import "./theme/purple.css";
|
||||
/* @import "./theme/pink.css"; */
|
||||
/* @import "./theme/purple.css"; */
|
||||
@import "./theme/red.css";
|
||||
/**组件库,必要的主题,不可删除**/
|
||||
@import "./theme/teal.css";
|
||||
/* @import "./theme/teal.css"; */
|
||||
@import "./theme/yellow.css";
|
||||
@import "./theme/blue-grey.css";
|
||||
@import "./theme/deep-orange.css";
|
||||
@import "./theme/deep-purple.css";
|
||||
/*@import "./theme/deep-purple.css";*/
|
||||
@import "./theme/light-blue.css";
|
||||
@import "./theme/light-green.css";
|
||||
/*@import "./theme/light-green.css"; */
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_plugin_calendar=t()}(this,(function(){"use strict";return function(e,t,a){var n="h:mm A",d={lastDay:"[Yesterday at] "+n,sameDay:"[Today at] "+n,nextDay:"[Tomorrow at] "+n,nextWeek:"dddd [at] "+n,lastWeek:"[Last] dddd [at] "+n,sameElse:"MM/DD/YYYY"};t.prototype.calendar=function(e,t){var n=t||this.$locale().calendar||d,o=a(e||void 0).startOf("d"),s=this.diff(o,"d",!0),i="sameElse",f=s<-6?i:s<-1?"lastWeek":s<0?"lastDay":s<1?"sameDay":s<2?"nextDay":s<7?"nextWeek":i,l=n[f]||d[f];return"function"==typeof l?l.call(this,a()):this.format(l)}}}));
|
||||
@@ -5,6 +5,7 @@
|
||||
*/
|
||||
function sleep(wait=500){
|
||||
let timid = null;
|
||||
if(wait==0) return Promise.resolve(true)
|
||||
clearTimeout(timid);
|
||||
return new Promise((res,rej)=>{
|
||||
timid = setTimeout(function() {
|
||||
|
||||
@@ -197,4 +197,5 @@ export default {
|
||||
chinaPost,
|
||||
password,
|
||||
password2,
|
||||
bankCard
|
||||
}
|
||||
|
||||
@@ -19,16 +19,16 @@ class vuex {
|
||||
let t = this;
|
||||
const g = this.store.getters
|
||||
let keys = Object.keys(g);
|
||||
|
||||
console.log(keys)
|
||||
let k = keys.map((el,index)=>{
|
||||
let f = el.split('/');
|
||||
let tst = {}
|
||||
if(f.length==1){
|
||||
tst[el]=g[el]
|
||||
}else{
|
||||
|
||||
tst[f[0]]={}
|
||||
tst[f[0]][f[1]] = g[el]
|
||||
tst[f[1]]=g[el]
|
||||
// tst[f[0]+'_'+f[1]]=g[el]
|
||||
// tst[f[0]][f[1]] = g[el]
|
||||
|
||||
}
|
||||
return tst
|
||||
|
||||
@@ -55,6 +55,7 @@ const store = new Vuex.Store({
|
||||
// $tm:state=>{
|
||||
// return $tm;
|
||||
// }
|
||||
|
||||
},
|
||||
mutations: {
|
||||
setTmVuetifyColor(state, color) {
|
||||
|
||||
새 이슈에서 참조
사용자 차단