image.png
image.png
image.png
怎么说呢，写uni-app项目次数有点少，老实说文档也没咋好好看,这几天搞了个很蠢的问题，
没仔细看文档，看到了个 <a>要改成<navigator>
navigator 又只能跳转本地页面
就以为uniapp 中不能用<a>标签
正好项目里有个地方要跳转到外链官网之类的
又找到了uni-link 组件 ，就理所当然的使用了，也没有去尝试一下 <a>标签
过了几天突然想试一下，结果可以用，就裂开了，中间还给人家说uniapp用不了a标签，giao
h5是完全可以使用a标签的，但是非h5应该是不可以的
image.png
之前看的什么a要改成navigator，其实算是一种类似规范的东西，h5可以用，非h5不行，所以会推荐使用navigator 或uni-link
真的是麻了
害，还是不能偷懒，得多尝试，
还是自己这块的表达处理确实有些恶心，多语言，两种类型表单， 什么三种语言任意一种就能提交，部分字段（日期，数字）之类的共用，输入的保持各自的语言，一种语言填一半，另一种填好，各自乱七八糟的判断处理很多，给自己整的头晕，对这些小问题就没有尝试
项目又封装了几个组件，还有那种给其他人用的，又进一步理解了自定义组件的双向绑定。
下面是对element el-tag那个自定义标签的例子的一个封装
props中的value是其他地方引用时v-model传来的值
list是一个推荐标签的功能接收的数组
recommend 为显示推荐标签
也做了去重处理 数量限制
<template>
<view>
<view class="tags-list">
<el-tag
:key="tag"
v-for="(tag,index) in value"
closable
:disable-transitions="false"
@close="tagClose(index)"
>
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="addTagVisible"
v-model="addTagValue"
ref="TagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button
v-else
class="button-new-tag"
size="small"
@click="showInput"
>
+ {{lang[langMark].lang.zdybq}}
</el-button>
</view>
<view class="recommend-tags" v-if="recommend">
<view class="recommend-head">
<text class="title">{{lang[langMark].lang.tjbq}}:</text>
<el-button type="text" size="medium" @click="changeRecomend">{{lang[langMark].lang.hyp}}</el-button>
</view>
<view class="recommend-content">
<el-tag
class="recomend-item"
disable-transitions
type="info"
:key="tag"
v-for="tag in recomendList"
@click="addTag(tag)"
>
{{tag}}
</el-tag>
</view>
</view>
</view>
</template>
<script>
import lang from '@/utils/lang/index.js'
export default {
name: "TagSelect",
data() {
return {
lang: lang,
recomendList: [],
addTagValue: '',
addTagVisible: false
}
},
props: {
value: {
type: Array,
default: () => {
return []
}
},
list: {
type: Array,
default: () => {
return []
}
},
recommend: {
type: Boolean,
default: false
},
max: {
type: Number,
default: 10
},
langMark: {
type: String,
default: 'zh-TW'
},
text: {
type: String,
default: '超出数量限制'
}
},
created() {
this.changeRecomend();
},
watch: {
list() {
this.changeRecomend();
}
},
methods: {
update(val) {
this.$emit('input', val)
},
// 推荐标签换一批
changeRecomend() {
if(!this.list) {
return [];
}
this.recomendList = [];
if(this.list.length<9) {
this.recomendList = [...this.list];
return;
}
let set = new Set();
while(set.size < 9) {
var index = Math.floor(Math.random()*this.list.length)
set.add(this.list[index]);
}
this.recomendList = [...set];
},
// 自定义标签
handleInputConfirm() {
if(this.value.indexOf(this.addTagValue) >= 0) {
this.$message({
message: this.lang[this.langMark].lang.yczxt,
type: 'warning'
});
this.addTagVisible = false;
this.addTagValue = '';
return;
}
let addTagValue = this.addTagValue;
if (addTagValue) {
this.update([...this.value,addTagValue]);
}
this.addTagVisible = false;
this.addTagValue = '';
},
// 显示输入框
showInput() {
if(this.value.length >= this.max) {
this.$message({
message: this.text,
type: 'warning'
});
return;
}
this.addTagVisible = true;
this.$nextTick(_ => {
this.$refs.TagInput.$refs.input.focus();
});
},
// 关闭标签
tagClose(index) {
this.value.splice(index, 1);
this.update([...this.value]);
},
// 添加推荐标签
addTag(tag) {
if(this.value.length >= this.max) {
this.$message({
message: this.text,
type: 'warning'
});
return;
}
if(this.value.indexOf(tag) >= 0) {
this.$message({
message: this.lang[this.langMark].lang.yczxt,
type: 'warning'
});
return;
}
this.update([...this.value,tag]);
},
}
}
</script>
