update widgetTime

qianlishi 3 years ago
parent 6ec0faf3e9
commit c047c822cd

@ -578,6 +578,7 @@ const widgetTools = [
{code: 'MM-dd', name: '日期无年'}, {code: 'MM-dd', name: '日期无年'},
{code: 'hh:mm', name: '时分'}, {code: 'hh:mm', name: '时分'},
{code: 'hh:mm:ss', name: '时分秒'}, {code: 'hh:mm:ss', name: '时分秒'},
{code: 'week', name: '星期'}
], ],
value: 'yyyy-MM-dd hh:mm:ss' value: 'yyyy-MM-dd hh:mm:ss'
}, },

@ -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;

Loading…
Cancel
Save