|
|
@ -3,95 +3,127 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'WidgetTime',
|
|
|
|
name: "WidgetTime",
|
|
|
|
components: {},
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
timestr: '',
|
|
|
|
timestr: "",
|
|
|
|
options: {},
|
|
|
|
options: {}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
transStyle() {
|
|
|
|
transStyle() {
|
|
|
|
console.log(this.objToOne(this.options))
|
|
|
|
console.log(this.objToOne(this.options));
|
|
|
|
return this.objToOne(this.options)
|
|
|
|
return this.objToOne(this.options);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
styleColor() {
|
|
|
|
styleColor() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? 'absolute' : 'static',
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
color: this.transStyle.color || '#fff',
|
|
|
|
color: this.transStyle.color || "#fff",
|
|
|
|
text: this.transStyle.text || '文本框',
|
|
|
|
text: this.transStyle.text || "文本框",
|
|
|
|
'font-size': this.transStyle.fontSize + 'px' || '30px',
|
|
|
|
"font-size": this.transStyle.fontSize + "px" || "30px",
|
|
|
|
'letter-spacing': this.transStyle.letterSpacing + 'em',
|
|
|
|
"letter-spacing": this.transStyle.letterSpacing + "em",
|
|
|
|
background: this.transStyle.background,
|
|
|
|
background: this.transStyle.background,
|
|
|
|
'font-weight': this.transStyle.fontWeight,
|
|
|
|
"font-weight": this.transStyle.fontWeight,
|
|
|
|
'text-align': this.transStyle.textAlign,
|
|
|
|
"text-align": this.transStyle.textAlign,
|
|
|
|
display: this.transStyle.hideLayer == undefined ? 'block' : this.transStyle.hideLayer ? 'none' : 'block',
|
|
|
|
display:
|
|
|
|
width: this.transStyle.width + 'px',
|
|
|
|
this.transStyle.hideLayer == undefined
|
|
|
|
height: this.transStyle.height + 'px',
|
|
|
|
? "block"
|
|
|
|
left: this.transStyle.left + 'px',
|
|
|
|
: this.transStyle.hideLayer
|
|
|
|
top: this.transStyle.top + 'px',
|
|
|
|
? "none"
|
|
|
|
right: this.transStyle.right + 'px',
|
|
|
|
: "block",
|
|
|
|
}
|
|
|
|
width: this.transStyle.width + "px",
|
|
|
|
},
|
|
|
|
height: this.transStyle.height + "px",
|
|
|
|
|
|
|
|
left: this.transStyle.left + "px",
|
|
|
|
|
|
|
|
top: this.transStyle.top + "px",
|
|
|
|
|
|
|
|
right: this.transStyle.right + "px"
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
handler(val) {
|
|
|
|
this.options = val
|
|
|
|
this.options = val;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
deep: true,
|
|
|
|
deep: true
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.options = this.value
|
|
|
|
this.options = this.value;
|
|
|
|
this.getTime()
|
|
|
|
this.getTime();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
formatFunction(date, fmt) {
|
|
|
|
formatFunction(date, fmt) {
|
|
|
|
if (/(y+)/.test(fmt)) {
|
|
|
|
if (/(y+)/.test(fmt)) {
|
|
|
|
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
|
fmt = fmt.replace(
|
|
|
|
|
|
|
|
RegExp.$1,
|
|
|
|
|
|
|
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
|
|
|
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const o = {
|
|
|
|
const o = {
|
|
|
|
'M+': date.getMonth() + 1, // 月份
|
|
|
|
"M+": date.getMonth() + 1, // 月份
|
|
|
|
'd+': date.getDate(), // 日
|
|
|
|
"d+": date.getDate(), // 日
|
|
|
|
'h+': date.getHours(), // 小时
|
|
|
|
"h+": date.getHours(), // 小时
|
|
|
|
'm+': date.getMinutes(), // 分
|
|
|
|
"m+": date.getMinutes(), // 分
|
|
|
|
's+': date.getSeconds(), // 秒
|
|
|
|
"s+": date.getSeconds(), // 秒
|
|
|
|
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
|
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
|
'S': date.getMilliseconds() // 毫秒
|
|
|
|
S: date.getMilliseconds() // 毫秒
|
|
|
|
}
|
|
|
|
};
|
|
|
|
for (var k in o) {
|
|
|
|
for (var k in o) {
|
|
|
|
if (new RegExp('(' + k + ')').test(fmt)) {
|
|
|
|
if (new RegExp("(" + k + ")").test(fmt)) {
|
|
|
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
|
|
fmt = fmt.replace(
|
|
|
|
|
|
|
|
RegExp.$1,
|
|
|
|
|
|
|
|
RegExp.$1.length == 1
|
|
|
|
|
|
|
|
? o[k]
|
|
|
|
|
|
|
|
: ("00" + o[k]).substr(("" + o[k]).length)
|
|
|
|
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return fmt
|
|
|
|
return fmt;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
check(val) {
|
|
|
|
check(val) {
|
|
|
|
if (val < 10) {
|
|
|
|
if (val < 10) {
|
|
|
|
return '0' + val
|
|
|
|
return "0" + val;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return val
|
|
|
|
return val;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
formatWeek(date, fmt) {
|
|
|
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
|
|
|
|
const month = date.getMonth();
|
|
|
|
|
|
|
|
const day = date.getDate();
|
|
|
|
|
|
|
|
const hours = date.getHours();
|
|
|
|
|
|
|
|
const minutes = date.getMinutes();
|
|
|
|
|
|
|
|
const seconds = date.getSeconds();
|
|
|
|
|
|
|
|
let dayCycle = date.getDay();
|
|
|
|
|
|
|
|
const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
|
|
|
|
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
|
|
|
|
|
|
if (dayCycle == i) {
|
|
|
|
|
|
|
|
dayCycle = "星期" + dayCycleArray[i];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return dayCycle;
|
|
|
|
|
|
|
|
},
|
|
|
|
displayTime() {
|
|
|
|
displayTime() {
|
|
|
|
this.timestr = this.formatFunction(new Date(), this.transStyle.timeFormat)
|
|
|
|
this.timestr =
|
|
|
|
|
|
|
|
this.transStyle.timeFormat.indexOf("week") > -1
|
|
|
|
|
|
|
|
? this.formatWeek(new Date(), this.transStyle.timeFormat)
|
|
|
|
|
|
|
|
: this.formatFunction(new Date(), this.transStyle.timeFormat);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getTime() {
|
|
|
|
getTime() {
|
|
|
|
setInterval(() => {
|
|
|
|
setInterval(() => {
|
|
|
|
this.displayTime()
|
|
|
|
this.displayTime();
|
|
|
|
}, 1000)
|
|
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.text{
|
|
|
|
.text {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|