2021-12-04

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>