• 【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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

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

    HTML

    关键的代码是这一段：

          

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

    完整HTML：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>

  
  <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>
  
  
  

  
  <link rel="stylesheet" href="highlight_js/default.css">
  <link rel="stylesheet" href="highlight_js/style.css">
  <script src="highlight_js/highlight.min.js">script>
  
  

  
  <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>2020year>
        <month>04month>
        <day>01day>
        <hour>00hour>
        <minute>00minute>
        <second>00second>
      starttime>
      
      <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>
      
    background>
  div>
div>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127

    CSS

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

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

.code-container {
  margin-right: 40px;
}

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    JS

    实现思路：

    1. mounted生命周期：拿到
      的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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    完整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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    参考链接

    1. 在这里找到了highlightjs的demo网页：https://blog.csdn.net/qq_43319748/article/details/123030283
    2. 原生JS实现复制功能：https://www.php.cn/vuejs/483715.html
  • 相关阅读:
    Prometheus的remotewrite for java
    网络安全（黑客）自学
    Unity3D学习之UI系统——使用UGUI制作游戏登陆界面
    java jdbc Incorrect string value for column
    Mall脚手架总结（一）——SpringSecurity实现鉴权认证
    云原生环境该怎样解决网络安全问题
    [机缘参悟-89]：《本质思考》- 七种本质思考习惯
    vue源码分析（二）——vue的入口发生了什么
    【GDB】 .gdbinit 文件
    EE5811-Computer vision-Filter and resample
  • 原文地址：https://blog.csdn.net/hans774882968/article/details/126239557