Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本

Posted hans774882968

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本相关的知识，希望对你有一定的参考价值。

文章目录

环境

Windows10、虚拟机Ubuntu20.04、Vue2.6.14、element-ui、highlight.js、vkbeautify.js

本文juejin：https://juejin.cn/post/7129561844678656007/

本文52pojie：https://www.52pojie.cn/thread-1672916-1-1.html

本文CSDN：https://blog.csdn.net/hans774882968/article/details/126239557

作者：hans774882968以及hans774882968

引言

书接上文，我用python的minidom生成好xml文本后，就在想，命令式地生成xml很麻烦，而vue生成html很方便，能不能用vue快速生成xml呢？做完上述链接的生成focal.xml的项目后，我得到了肯定的回答。这大概是我做过的最有创意的休闲项目了。项目背景看上述链接吧，不再赘述。

为了项目足够轻量，我原本打算用cdn导入一切资源。但由于某些原因，cdn加载速度很慢还有可能失败。因此我把所有的cdn资源都下载到本地了。

下载cdn的心路历程：

  1. element-ui的css，https://unpkg.com/element-ui/lib/theme-chalk/index.css，引用了字体文件fonts/element-icons.ttf和fonts/element-icons.woff（src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");），也要自己下好。
  2. 由于同一种原因，我们没法直接下载highlight.js的cdn。幸好我在参考链接1找到了highlightjs的demo网页：https://highlightjs.org/static/demo/，这个网页的静态资源可以顺利访问（虽然很慢）。
  3. vkbeautify：https://github.com/aabluedragon/vkbeautify/blob/master/index.js

项目结构如下：

│  focal_vue.xml
│  get_focal.html
│  index.css
│  index.js
│  vkbeautify.js
│  vue2.6.14.min.js
│
├─element-ui
│  │  element-ui.css
│  │  element-ui.js
│  │
│  └─fonts
│          element-icons.ttf
│          element-icons.woff
│
└─highlight_js
        default.css
        highlight.min.js
        style.css

我们只需要点击get_focal.html，就能在浏览器上看到所求的focal.xml文本，左边是高亮代码，右边是一个textarea。点击右上角的复制按钮即可复制所求文本。

HTML

关键的代码是这一段：

      <template v-for="(file, index) in files" :key="file">
        <static>
          <duration> static_duration.toFixed(1) </duration>
          <file> file </file>
        </static>
        <transitionn>
          <duration> transition_duration.toFixed(1) </duration>
          <from> file </from>
          <to> files[(index + 1) % files.length] </to>
        </transitionn>
      </template>

因为要循环的是两个兄弟xml，所以需要加一个template标签。另外，transition在vue中是有意义的，因此我们使用另一个名称transitionn，并在输出文本之前把文本换成transition。

完整HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!--引入element-ui和vue2.6.14-->
  <script src="vue2.6.14.min.js"></script>
  <link rel="stylesheet" href="element-ui/element-ui.css">
  <script src="element-ui/element-ui.js"></script>
  <!--<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>-->
  <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

  <!--引入highlight.js-->
  <link rel="stylesheet" href="highlight_js/default.css">
  <link rel="stylesheet" href="highlight_js/style.css">
  <script src="highlight_js/highlight.min.js"></script>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">-->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>-->

  <!--引入vkbeautify-->
  <script src="vkbeautify.js"></script>

  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
  <div class="goal-container">
    <div class="code-container">
      <pre><code> goal </code></pre>
    </div>
    <el-input
      ref="textarea"
      type="textarea"
      v-model="goal"
      :rows="30"
      disabled
    ></el-input>
    <el-button type="primary" class="btn" @click="xmlCopy">复制</el-button>
  </div>

  <div ref="root">
    <background>
      <starttime>
        <year>2020</year>
        <month>04</month>
        <day>01</day>
        <hour>00</hour>
        <minute>00</minute>
        <second>00</second>
      </starttime>
      <!-- This animation will start at midnight. -->
      <template v-for="(file, index) in files" :key="file">
        <static>
          <duration> static_duration.toFixed(1) </duration>
          <file> file </file>
        </static>
        <transitionn>
          <duration> transition_duration.toFixed(1) </duration>
          <from> file </from>
          <to> files[(index + 1) % files.length] </to>
        </transitionn>
      </template>
      <!--
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/Focal-Fossa_WP_4096x2304_GREY.png</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/Focal-Fossa_WP_4096x2304_GREY.png</from>
        <to>/usr/share/backgrounds/brad-huchteman-stone-mountain.jpg</to>
      </transition>
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/brad-huchteman-stone-mountain.jpg</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/brad-huchteman-stone-mountain.jpg</from>
        <to>/usr/share/backgrounds/joshua-coleman-something-yellow.jpg</to>
      </transition>
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/joshua-coleman-something-yellow.jpg</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/joshua-coleman-something-yellow.jpg</from>
        <to>/usr/share/backgrounds/matt-mcnulty-nyc-2nd-ave.jpg</to>
      </transition>
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/matt-mcnulty-nyc-2nd-ave.jpg</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/matt-mcnulty-nyc-2nd-ave.jpg</from>
        <to>/usr/share/backgrounds/ryan-stone-skykomish-river.jpg</to>
      </transition>
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/ryan-stone-skykomish-river.jpg</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/ryan-stone-skykomish-river.jpg</from>
        <to>/usr/share/backgrounds/hardy_wallpaper_uhd.png</to>
      </transition>
      <static>
        <duration>1795.0</duration>
        <file>/usr/share/backgrounds/hardy_wallpaper_uhd.png</file>
      </static>
      <transition>
        <duration>5.0</duration>
        <from>/usr/share/backgrounds/hardy_wallpaper_uhd.png</from>
        <to>/usr/share/backgrounds/Focal-Fossa_WP_4096x2304_GREY.png</to>
      </transition>
      -->
    </background>
  </div>
</div>

<script src="index.js"></script>
</body>
</html>

CSS

这里实现了一个“复制”按钮处于父元素右上角的功能：父元素相对定位，自己绝对定位。

.goal-container 
  display: flex;
  margin: 40px;
  position: relative;


.code-container 
  margin-right: 40px;


.goal-container .btn 
  position: absolute;
  right: 0;

JS

实现思路：

  1. mounted生命周期：拿到<div ref="root">的innerHTML，把transitionn换成transition，进行美化，然后展示xml文本。
  2. 点击复制按钮后：进行复制。

为了美化xml：我们用highlight.js来高亮显示xml，用vkbeautify.js来format xml文本。

复制文本的方法（网上最容易搜到的那种，参考链接2）：动态创建一个textarea元素，模拟选中然后document.execCommand('Copy')。代码如下：

function domCopy(text) 
  const textarea = document.createElement('textarea')
  // 将该 textarea 设为 readonly 防止 ios 下自动唤起键盘，同时将 textarea 移出可视区域
  textarea.readOnly = 'readonly'
  textarea.style.position = 'absolute'
  textarea.style.left = '-9999px'
  textarea.value = text
  document.body.appendChild(textarea)
  textarea.select()
  textarea.setSelectionRange(0, textarea.value.length)
  const result = document.execCommand('Copy')
  document.body.removeChild(textarea)
  return result

完整JS代码：

function domCopy(text) 
  const textarea = document.createElement('textarea')
  // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
  textarea.readOnly = 'readonly'
  textarea.style.position = 'absolute'
  textarea.style.left = '-9999px'
  textarea.value = text
  document.body.appendChild(textarea)
  textarea.select()
  textarea.setSelectionRange(0, textarea.value.length)
  const result = document.execCommand('Copy')
  document.body.removeChild(textarea)
  return result


const vm = new Vue(
  el: '#app',
  mounted() 
    this.goal = vkbeautify.xml(this.$refs['root'].innerHTML, 2)
    this.goal = this.goal.replaceAll('transitionn', 'transition')
    hljs.highlightAll()
  ,
  data() 
    return 
      goal: '',
      static_duration: 25.0,
      transition_duration: 2.0,
      files: [
        '/home/hans/图片/1.png', '/home/hans/图片/2.png',
        '/home/hans/图片/3.jpg', '/home/hans/图片/7.jpg',
        '/home/hans/图片/8.jpg', '/home/hans/图片/9.jpg',
        '/home/hans/图片/10.jpg', '/home/hans/图片/11.jpg',
        '/home/hans/图片/12.png', '/home/hans/图片/13.jpg',
        '/home/hans/图片/14.jpg', '/home/hans/图片/15.jpg',
        '/home/hans/图片/16.jpg', '/home/hans/图片/17.jpg',
        '/home/hans/图片/18.jpg', '/home/hans/图片/19.jpg',
        '/home/hans/图片/20.jpg', '/home/hans/图片/23.jpg',
        '/home/hans/图片/24.jpg', '/home/hans/图片/25.jpg',
        '/home/hans/图片/26.jpg', '/home/hans/图片/27.jpg',
        '/home/hans/图片/33.jpg', '/home/hans/图片/34.jpg',
        '/home/hans/图片/35.jpg', '/home/hans/图片/37.jpg',
        '/home/hans/图片/38.jpg', '/home/hans/图片/39.png',
        '/home/hans/图片/40.jpg', '/home/hans/图片/41.png',
        '/home/hans/图片/43.jpg', '/home/hans/图片/44.jpg',
        '/home/hans/图片/45.jpg', '/home/hans/图片/46.jpg',
        '/home/hans/图片/47.jpg', '/home/hans/图片/48.jpg',
        '/home/hans/图片/49.jpg', '/home/hans/图片/50.jpg',
        '/home/hans/图片/51.jpg', '/home/hans/图片/52.png'
      ]
    
  ,
  methods: 
    xmlCopy() 
      const result = domCopy(this.goal)
      this.$message.success(`复制$result ? '成功' : '失败'`)
    
  ,
)

参考链接

  1. 在这里找到了highlightjs的demo网页：https://blog.csdn.net/qq_43319748/article/details/123030283
  2. 原生JS实现复制功能：https://www.php.cn/vuejs/483715.html

以上是关于Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本的主要内容，如果未能解决你的问题，请参考以下文章

vue项目安装使用element_UI

Vue开发实例（03）之Vue项目引入element_ui

Vue+element_ui上传文件,并传递额外参数(自动上传)使用实例

element_ui的datePicker修改样式

Ubuntu写python脚本实现自定义壁纸幻灯片：Vue法字符串拼接法minidom法

VSCode 自定义Vue snippets, 快速生成Vue模板