文件大小单位的动态格式化功能

目录

1、安装编辑器vue2-ace-editor

2、在vue文件将他进入进来

 3、注册局部组件

4、可以在模版中使用啦

5、配置编辑器

6、然后就可以在代码编辑器中写入格式化代码啦

 7、在表格的地方怎么使用呢

 8、解析编辑器代码(由于用的地方太多了，直接全局挂载了）

 9、下面是一个简单的格式化代码 ，仅仅针对文件大小的单位将进行格式化

---

由于我司的项目表格的字段都是可以动态配置的，某些字段又需要进行格式化处理；例如文件大小，视频时长等等，所以就出现了该需求，给出一个格式化的功能，让前段自己根据需求去格式化这些字段内容：

1、安装编辑器vue2-ace-editor

npm i vue2-ace-editor --save

2、在vue文件将他进入进来

import Editor from 'vue2-ace-editor'

 3、注册局部组件

components: { Editor },

4、可以在模版中使用啦

<el-drawer title="代码编辑器" :visible.sync="htmlDialog" direction="rtl" :before-close="handleHtmlClose">
    <div class="codeEditBox">
        <editor :lang="langs" v-model="formatHtml" @input='codeChange' :options="editorOptions" @init="editorInit" :theme="theme"></editor>
    </div>
    <div class="codeBtn">
        <el-button size="small" @click="handleHtmlClose">取消</el-button>
        <el-button type="danger" size="small" @click="formatHtml=''">清空</el-button>
        <el-button type="primary" size="small" @click="htmlHandle">确定</el-button>
    </div>
</el-drawer>

5、配置编辑器

data() {
    return {
        langs: 'javascript', // 使用js语言
        theme: 'monokai', // 主题
        editorOptions: { // 编辑器配置
            tabSize: 2, // tab制表符空2格
            showPrintMargin: false, // 是否显示右侧打印边距
            fontSize: 16, 
            highlightActiveLine: true,  // 是否高亮
            enableBasicAutocompletion: true, // 是否自动补全
            enableSnippets: true, // 是否快速插入
            enableLiveAutocompletion: true, // 是否实时自动补全
        },
    }
},
methods: {
    editorInit () {
        require('brace/ext/language_tools') // 编辑器语法检查功能
        require(`brace/mode/${this.langs}`) // 编辑器语言
        require(`brace/theme/${this.theme}`) // 编辑器主题
    },
}

6、然后就可以在代码编辑器中写入格式化代码啦

如图所示：格式化视频时长

tips:

代码在这里：

// 格式化视频时长
if (v === '') {
    return 0 + 's';
} else if (v < 60) {
    return v + 's';
} else if (v < 60 * 60) {
    return (v / 60).toFixed(2) + 'min';
} else if (v < 60 * 60 * 24) {
    return (v / (60 * 60)).toFixed(2) + 'h';
} else if(v == 'null') {
  return ' ';
}

// 格式化文件大小
if (v =='') {
    return 0;
} else if (v < 1024) {
    return parseFloat(v).toFixed(2) + 'B';
} else if (1024 < v && v < 1024 * 1024) {
    return parseFloat(v / 1024).toFixed(2) + 'KB';
} else if (1024 * 1024 < v && v < 1024 * 1024 * 1024) {
    return parseFloat(v / (1024 * 1024)).toFixed(2) + 'MB';
} else if (1024 * 1024 * 1024 < v && v < 1024 * 1024 * 1024 * 1024) {
    return parseFloat(v / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
} 

 7、在表格的地方怎么使用呢

<el-table-column :width="item.oldColumnName=='ztm'? '250': item.oldColumnName=='dh'? '120':''" v-for="item in dynamicTable" :label="item.newName" :prop="item.oldColumnName" :key="item.id">
    <template slot-scope="scope">
        // 这一列是写死的
        <div v-if="item.oldColumnName=='ztm'" style="text-align: left" v-html="estableCtx.formatZTM(scope.row)"></div>
        // 没有格式化的代码
        <!-- <div v-else>{{scope.row[item.oldColumnName]}}</div> -->
        <div v-else>
        // 这里是动态表格 formatterValue是解析上面的编辑器里面写的代码的（只能解析if else）
            <div v-if="item.formatHtml" v-html="formatterValue(scope.row[item.oldColumnName],item.formatHtml)"></div>
            <div v-else>{{scope.row[item.oldColumnName]}}</div>
        </div>
    </template>
</el-table-column>

 8、解析编辑器代码(由于用的地方太多了，直接全局挂载了）

// v是需要格式化的内容,htmlString是格式化代码 
Vue.prototype.formatterValue = (v,htmlString)=> {
    try {
        if(v) {
            // 使用Decrypt 进行解密，动态创建函数
            const func = new Function('v', Decrypt(htmlString));
            // 调用函数，将v传过去
            const result = func(v);

            return `${result}`;
        } else {
            return ''
        }
    } catch (error) {
        console.log(error, 'error');
        return v;
    }
}

 9、下面是一个简单的格式化代码 ，仅仅针对文件大小的单位将进行格式化

Vue.filter('formatFileSize', function(value) {
    if (typeof value !== 'number') {
      return '';
    }
    let units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    let tier = Math.floor(Math.log(value) / Math.log(1024));
    return `${(value / Math.pow(1024, tier)).toFixed(2)} ${units[tier]}`;
});