怎么說呢，寫uni-app項(xiàng)目次數(shù)有點(diǎn)少，老實(shí)說文檔也沒咋好好看,這幾天搞了個很蠢的問題，
沒仔細(xì)看文檔，看到了個 <a>要改成<navigator>
navigator 又只能跳轉(zhuǎn)本地頁面
就以為uniapp 中不能用<a>標(biāo)簽
正好項(xiàng)目里有個地方要跳轉(zhuǎn)到外鏈官網(wǎng)之類的
又找到了uni-link 組件 ，就理所當(dāng)然的使用了，也沒有去嘗試一下 <a>標(biāo)簽
過了幾天突然想試一下，結(jié)果可以用，就裂開了，中間還給人家說uniapp用不了a標(biāo)簽，giao
h5是完全可以使用a標(biāo)簽的，但是非h5應(yīng)該是不可以的
之前看的什么a要改成navigator，其實(shí)算是一種類似規(guī)范的東西，h5可以用，非h5不行，所以會推薦使用navigator 或uni-link
真的是麻了
害，還是不能偷懶，得多嘗試，
還是自己這塊的表達(dá)處理確實(shí)有些惡心，多語言，兩種類型表單， 什么三種語言任意一種就能提交，部分字段（日期，數(shù)字）之類的共用，輸入的保持各自的語言，一種語言填一半，另一種填好，各自亂七八糟的判斷處理很多，給自己整的頭暈，對這些小問題就沒有嘗試
項(xiàng)目又封裝了幾個組件，還有那種給其他人用的，又進(jìn)一步理解了自定義組件的雙向綁定。
下面是對element el-tag那個自定義標(biāo)簽的例子的一個封裝
props中的value是其他地方引用時(shí)v-model傳來的值
list是一個推薦標(biāo)簽的功能接收的數(shù)組
recommend 為顯示推薦標(biāo)簽
也做了去重處理 數(shù)量限制
<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: '超出數(shù)量限制'
}
},
created() {
this.changeRecomend();
},
watch: {
list() {
this.changeRecomend();
}
},
methods: {
update(val) {
this.$emit('input', val)
},
// 推薦標(biāo)簽換一批
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];
},
// 自定義標(biāo)簽
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();
});
},
// 關(guān)閉標(biāo)簽
tagClose(index) {
this.value.splice(index, 1);
this.update([...this.value]);
},
// 添加推薦標(biāo)簽
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>
