【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

**作者：(https://blog.csdn.net/hans774882968)以及(https://juejin.cn/user/1464964842528888)**

### 引言

[书接上文](https://juejin.cn/post/7129080519945355277/)，我用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

关键的代码是这一段：

```vue
   <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：

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


<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>2020</year>
   <month>04</month>
   <day>01</day>
   <hour>00</hour>
   <minute>00</minute>
   <second>00</second>
   </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>
```

### CSS

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

```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')`。代码如下：

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

完整JS代码：

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

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

不错，谢谢分享

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

不错，感谢分享:lol

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

vue高级写法新思路

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

{:1_893:} 不错感谢分享

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

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

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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