文章目录
背景
代码片断

背景
接手公司以前做的vue项目，是基于element2.3.9搭建的，现在要追加的功能需要在输入框显示限制输入长度，而2.3.9的element是没有show-word-limit功能的，如果升级element版本会导致项目中其他样式存在问题，所以只能自己添加功能代码了，磕磕绊绊终于写出来了~
代码片断
// 组件代码
<template>
    <div class="inputWord">
        <el-input id="inputWord" v-bind="$attrs" v-on="$listeners" :maxlength="maxlength" :value="value" auto-complete="off" @input="changeWord"></el-input>
        <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
                <span class="el-input__count">
                    <span class="el-input__count-inner">
                        {{ wordLength }}/{{ maxlength }}
                    </span>
                </span>
            </span>
        </span>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: String,
                default: ''
            },
            maxlength: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                wordLength: 0,
                flag: true
            };
        },
        created() {
            this.wordLength = this.value.length;
        },
        methods: {
            changeWord(val) {
                this.$nextTick(() => {
                    if (this.flag) {
                        this.wordLength = val.length;
                    }
                });
            }
        },
        mounted() {
        // 加这两个函数是为了避免输入中文过程中触发input事件
            let input = document.getElementById('inputWord');
            input.addEventListener('compositionstart', () => {
                this.flag = false;
            });
            input.addEventListener('compositionend', () => {
                this.flag = true;
            });
        }
    };
</script>
<style lang='scss' scoped>
.inputWord /deep/{
    position: relative;
    .el-input__inner{
        padding-right: 80px;
    }
}
.el-input__suffix{
    position: absolute;
    height: 100%;
    right: 5px;
    top: 0;
    text-align: center;
    color: #c0c4cc;
    transition: all .3s;
    pointer-events: none;
}
.el-input__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: #909399;
    font-size: 12px;
}
.el-input__count-inner {
    background: #fff;
    line-height: normal;
    display: inline-block;
    padding: 0 5px;
}
</style>


// 组件的引用
// 引用组件，如果全局引用在index.js中全局引用插件
import WordLimitInput from 'components/WordLimitInput';
Vue.component('word-limit-input', WordLimitInput);
// 页面代码
<word-limit-input v-model="questionsData.appName" :maxlength="30"></word-limit-input>

在word中有名称标题：名称内容 格式，想达到名称标题不允许修改，名称内容允许修改可使用限制编辑。

调出【开发工具】，点击文件->选项->自定义功能区，勾选【开发工具】。
输入名称标题，然后在【开发工具】中插入【格式文本内容控制】。
点击【限制编辑】，在编辑限制中选择【填写窗体】。
最后点击【启动保护】，设置密码即可。

有的时候我们发送的word文件有些内容是不想别人复制粘贴的，我们就可以使用word中的限制编辑功能了。不知道大家会不会使用，有想学习一下的小伙伴可以跟着小编学习试试哦！



No.1如何设置限制编辑

首先给大家介绍两种设置限制编辑的方式：

第一种是点击【审阅】，找到【保护】，接着就可以看到【限制编辑】了。



第二种是点击【文件】，在该页面中找到【信息】，然后是【保护文档】，在保护文档中就可以看到【限制编辑】了。



No.2如何使用限制编辑

第一种就是我们对整篇word内容限制编辑，点击一下【审阅】，然后找到【保护】内的【限制编辑】。勾选一下【格式化限制】与【编辑限制】中的功能。然后点击【是，启动强制保护】，输入密码就可以了。



第二种方法就是允许部分内容可以编辑了，在第一种方法的基础上，我们需要再勾选一个【例外项】，然后再点击【是，启动强制保护】。



No.3如何取消限制编辑

设置与使用限制编辑都教给大家了，还有就是也要学会取消限制编辑啊。取消和使用是有些相似的，取消需要点击的就是【停止保护】，然后输入密码就可以了。



以上就是小编今天为大家总结word中限制编辑的使用技巧了，还不会使用的小伙伴记得学习一下啊！

相信很多朋友都遇到或在网上下载的word资料有无法编辑的问题，这种情况是因为设置了密码保护，你需要输入密码才能无限制使用该资料。也有可能自己的Word文件，自己设置的密码保护结果忘记了密码是多少？难道就只能放在角落里落灰吗？下面就给大家介绍一种无需密码就可以关闭密码保护的方法！

方法如下：

打开okfone WORD解密大师，点击【解除限制】



然后把Word文件导入到软件中，一键点击【开始】就可以完成编辑限制的解除了