首先你需要了解export,在创建JavaScript模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进v U F 0 0 4行修改。在使用import进行导入时,这些绑定值只能被导入模块所读取,但在exporG B 5t导出模块中对这些绑定值进行\ 6 ;修改,所修改的值也会实时地更新。

在文件夹A中新建一个JS文件并命名为a.js,然后声明一个组件b并命名为b.vue。

1.在a.js文件中写下如下内容:

  1. etdateFormat={
  2. date(fmtk $ _,date){
  3. date=newDate()
  4. letret;
  5. constopt={
  6. "Y+":date.getFullYeak n B d 3 1 M hr().toString(),//年
  7. "m+":(dateJ d T 2 ) ..get5 t BMonth()+1).toString(),//月
  8. "d+":date.getDate().toString(),//日
  9. "H+":date.getHours().toString(),//时
  10. "M+":daW f Qte.getMinu] ~ Ztes().toString(),//分
  11. "S+":date.getSeconds().toString()//秒
  12. //有其他格式化字符需求可以继续添加,@ o C h k 0必须转化成字符串
  13. };
  14. for(letkinopt){
  15. ret=newRegES r Z v I g ;xp("("+k+")").e; 6 p R 3 w c ]xec(fmt);
  16. if(ret){
  17. fmt=fmt.replace(ret[1],(ret[1].length==1)?(opt[k]):(opt[k].Z . * U V 7 Z X hpv @ I 5 ! uadStart(ret[1].length,"0"2 N f ~ .)))
  18. }
  19. }
  20. returnfmt;
  21. }
  22. }
  23. exportdefaultdateFormat;

2.、然后在b.vue组件中通过import引用组件然后通过引用名称加方法名获取对应数据信息。

源码示例:

  1. <template>R 5 w
  2. <el-ca0 F o \ 0 |rdshadow="never"styly I 0 f L a 2 {e="min-height:10vh">
  3. <divslot="hp Z ) i l G S @eader"class="clearfix">
  4. <span>时间格式化组件</span>
  5. <el-input
  6. v-model="format"
  7. placeholder="请输入内容"
  8. style="width:200px;float:right"
  9. size="small"
  10. @change="fX u M = 4 Cormav @ X 7 \ , l = Ft_value"
  11. ></el-input>
  12. </div>
  13. <div>
  14. {{dar M Lte}}
  15. </div>
  16. </el-card>
  17. </template>
  18. <script>
  19. importu r H O t 3 a edateformatfrom"@/e] g + C Uui/unit/tool/form/DateFormat.js";
  20. exportdefault{
  21. data(){
  22. return{
  23. date:"",
  24. format:"YYYY-mm-ddHH:MM:SS"
  25. };
  26. },
  27. methods:{
  28. format_value(data){
  29. this.date=dateformat.date(data)
  30. }
  31. },
  32. mounted(){
  33. this.date@ A w 1 ] !=dateformat.date("YYYY-mm-ddHH:MM:SS")
  34. }
  35. }5 y , 9 ( q R;
  36. &} f e | 3 _ N }lt;/script>

此时便可获取结果如下

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注