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

hans7 · 发表于 2022-8-9 01:45

本帖最后由 hans7 于 2022-8-9 01:51 编辑

环境

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的心路历程：

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");），也要自己下好。
由于同一种原因，我们没法直接下载highlight.js的cdn。幸好我在参考链接1找到了highlightjs的demo网页：https://highlightjs.org/static/demo/，这个网页的静态资源可以顺利访问（虽然很慢）。
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" >-->
  <!--<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" >-->
  <!--<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

实现思路：

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

为了美化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 ? '成功' : '失败'}`)
    }
  },
})

参考链接

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

zpy2 · 发表于 2022-8-9 05:50

不错，谢谢分享

shaon153 · 发表于 2022-8-9 09:18

不错，感谢分享

tlpking · 发表于 2022-8-9 09:30

vue高级写法新思路

Ricardo_M_Zh · 发表于 2022-8-9 09:56

不错感谢分享

FIzz001 · 发表于 2022-8-9 11:29

这么厉害，很不错哦，谢谢分享

justyvan · 发表于 2022-8-9 14:43

厉害厉害厉害厉害厉害厉害厉害厉害厉害,谢谢分享

hans7 · 发表于 2022-8-10 01:06

刚刚发现“把transitionn直接替换成transition”这个步骤有个小漏洞：需要保证xml标签以外的部分没有“transitionn”文本。这个漏洞暂时不知道怎么补，但影响不大，就不更新文章啦！

virsnow · 发表于 2022-10-2 15:22

这么厉害，很不错哦，谢谢分享

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【Vue+element_ui】生成Ubuntu自定义壁纸幻灯片的核心xml文本

环境

引言

HTML

CSS

JS

参考链接

免费评分