cnbugs/uni-halo
1
0
Forkuj 0
kopia lustrzana https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 13:19:31 +08:00
Kod Zgłoszenia Aktywność

新增：更新halo.config.js 配置参数；

Przeglądaj źródła 
更新：更新项目UI框架；
修复：修复友链列表丢失白色背景色BUG;
This commit is contained in:
小莫唐尼
2022-12-09 18:10:47 +08:00
rodzic 3fd3b2247a
commit 9d3ebac076
93 zmienionych plików z 1120 dodań i 7495 usunięć
Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files
tm-vuetify/components/tm-album/tm-album.vue
+14 -15
Wyświetl plik
@@ -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;
});
},
tm-vuetify/components/tm-button/tm-button.vue
+8 -5
Wyświetl plik
@@ -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 {
tm-vuetify/components/tm-calendar/tm-calendar.vue
+32 -24
Wyświetl plik
@@ -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}
}
tm-vuetify/components/tm-calendarView/tm-calendarView.vue
+16 -7
Wyświetl plik
@@ -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">
tm-vuetify/components/tm-countdown/tm-countdown.vue
+1 -1
Wyświetl plik
@@ -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;
}
},
tm-vuetify/components/tm-dialog/tm-dialog.vue
+5 -5
Wyświetl plik
@@ -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 {
tm-vuetify/components/tm-dragGrid/tm-dragGrid.vue
+1 -1
Wyświetl plik
@@ -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;
tm-vuetify/components/tm-dragList/tm-dragList.vue
-1
Wyświetl plik
@@ -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)
tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue
+1
Wyświetl plik
@@ -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>
tm-vuetify/components/tm-grouplist/tm-grouplist.vue
+16 -42
Wyświetl plik
@@ -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) {
tm-vuetify/components/tm-icons/tm-icons.vue
+160 -157
Wyświetl plik
@@ -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>
tm-vuetify/components/tm-input/tm-input.vue
+5 -2
Wyświetl plik
@@ -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();
})
tm-vuetify/components/tm-listitem/tm-listitem.vue
+27 -9
Wyświetl plik
@@ -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() {
tm-vuetify/components/tm-menubars/tm-menubars.vue
+4 -1
Wyświetl plik
@@ -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: {
// 是否开启暗黑模式
tm-vuetify/components/tm-more/tm-more.vue
+12 -10
Wyświetl plik
@@ -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;
tm-vuetify/components/tm-poup/tm-poup.vue
+7 -7
Wyświetl plik
@@ -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;
}
}
tm-vuetify/components/tm-propress/tm-propress.vue
+16 -10
Wyświetl plik
@@ -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;
tm-vuetify/components/tm-row/tm-row.vue
+27 -26
Wyświetl plik
@@ -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>
tm-vuetify/components/tm-segTabs/tm-segTabs.vue
+4 -4
Wyświetl plik
@@ -191,10 +191,10 @@
},
mounted() {
let t = this;
uni.$tm.sleep(30).then(()=>{
t.setInits();
})
t.setInits();
},
updated() {
this.setInits();
},
methods: {
setInits() {
tm-vuetify/components/tm-sheet/tm-sheet.vue
+2 -20
Wyświetl plik
@@ -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>
tm-vuetify/components/tm-signBoard/tm-signBoard.vue
-1
Wyświetl plik
@@ -12,7 +12,6 @@
@touchstart="touchstart"
@touchmove.stop.prevent="touchsmove"
@touchend="touchsend"
@mousedown="touchstart"
@mousemove.stop.prevent="touchsmove"
@mouseup="touchsend"
tm-vuetify/components/tm-slider/tm-slider.vue
+12 -1
Wyświetl plik
@@ -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) {
tm-vuetify/components/tm-sliders/tm-sliders.vue
+15 -1
Wyświetl plik
@@ -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);
tm-vuetify/components/tm-swiper/tm-swiper.vue
+358 -399
Wyświetl plik
@@ -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>
tm-vuetify/components/tm-translate/tm-translate.vue
+1 -1
Wyświetl plik
@@ -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",
tm-vuetify/components/tm-upload/tm-upload.vue
+60 -35
Wyświetl plik
@@ -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;
tm-vuetify/components/tm-weekbar/tm-weekbar.vue
+10
Wyświetl plik
@@ -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(){