|
这是组件的代码:
- <import name="switch" src="./Switch.ux"></import>
-
- <template>
- <div class="time-item"
- @click="{{$emit('click')}}"
- >
- <div class="time-item-display">
- <text class="time-item-display-{{chooseTitleClass(title)}} {{status ? 'active':'inactive'}}">
- {{title.length < 11 ? title : title.slice(0,10) + "..."}}
- </text>
- <text class="time-item-display-desc {{status ? 'active':'inactive'}}"
- for="{{desc}}"
- >
- {{$item}}
- </text>
- </div>
- <div class="time-item-switch">
- <switch value="{{status}}"
- color="#30C0B1"
- @touch="onSwitchClick(status)"
- ></switch>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- props: {
- title: String,
- desc: {
- type: Array,
- default() {
- return []
- }
- },
- active: Boolean
- },
- // 数据
- data() {
- return {
- status: this.active
- }
- },
- /* ----------------------------------------- 生命周期 ----------------------------------------- */
- onInit() {
- },
- /* ----------------------------------------- 绑定函数 ----------------------------------------- */
- /**
- * 开关点击
- */
- onSwitchClick(status) {
- this.status = !status;
- this.$emit("change", this.status);
- },
- /* ----------------------------------------- 自定义函数 ----------------------------------------- */
- /**
- * 选择标题的类。时间的字符,文字要放大。
- * @param title
- * @returns {string}
- */
- chooseTitleClass(title) {
- return title.match(/^\d{2}\:\d{2}$/) ? 'time' : 'title';
- }
- }
- </script>
复制代码
使用的时候,会报出这样的错误:
到底是什么原因?props 和 data 我都是按照手册设置的。
|
|