<!-- run -->
<style>
#demo {
width: 100%;
height: 100%;
}
</style>
<div id="demo" style="display:flex;flex-direction:row;justify-items: space-between;flex-wrap: wrap;">
<workflow-item v-for="workflow in shortcuts" :workflow="workflow" :key="workflow.id" />
</div>
<script>
Vue.component("workflow-item", {
props: ["workflow"],
template: `<div :style="{cursor:'pointer',textAlign:'left',borderRadius:'15px',
backgroundColor: workflow.bgColor,width: '180px',minHeight: '95px',
margin:'15px',padding:'15px',boxShadow:'5px 5px 15px #555555'}"
@click="javascript:window.open(workflow.link,'_self')">
<div :style="{color:'white',fontSize:'20px',fontWeight:'large'}"> {{workflow.iconText}} </div>
<div :style="{color:'white',fontSize:'16px',fontWeight:'bold'}"> {{workflow.title}} </div>
<div :style="{textAlign:'right',bottom:'0px',right:'0px',color:'white',fontSize:'15px'}">下載⇣</div>
</div>`
});
new Vue({
el: "#demo",
mounted() {
var that = this;
var req = new XMLHttpRequest();
req.open('GET', 'http://192.168.1.6:8888/data.json', true);
req.setRequestHeader('Access-Control-Allow-Origin ', '*');
req.onreadystatechange = function() {
if (this.status == 4 && this.statusCode == 200) {
this.$nextTick(() => {
that.shortcuts = JSON.parse(req.responseText);
});
}
}
req.send();
},
data: {
shortcuts: [{
id: 0,
iconText: "❖",
bgColor: "#ff4400",
title: "製作Mac端.dmg格式安裝包",
link: "https://www.icloud.com/shortcuts/aef5905aa762450c8ef68041420bf403"
}, {
id: 1,
iconText: "☯︎",
bgColor: "#99ee99",
title: "PNG圖片轉Mac應用圖標ICNS格式",
link: "https://www.icloud.com/shortcuts/ada0ba5d8ff34a17a61e721e36c833d2"
}, {
id: 2,
iconText: "🛠",
bgColor: "#3355ee",
title: "Mac端JSON文件與Plist文件互轉",
link: "https://www.icloud.com/shortcuts/32b17d50755f4a01860847a32b532c5f"
}, {
id: 3,
iconText: "🛠",
bgColor: "#3355ee",
title: "Xcode查看二進制包含架構(lipo -info)",
link: "https://www.icloud.com/shortcuts/be3d264c22a343f6bf78edac5982acb8"
}, {
id: 4,
iconText: "🛠",
bgColor: "#3355ee",
title: "Xcode工程顯示Products目錄",
link: "https://www.icloud.com/shortcuts/5e838565557848ed9035b5c1409d4cd7"
}, {
id: 5,
iconText: "🛠",
bgColor: "#ff0066",
title: "獲取Mac設備信息",
link: "https://www.icloud.com/shortcuts/b08b8dcdc5fc4129b44462812ca95cb1"
}, {
id: 6,
iconText: "☯︎",
bgColor: "#11aaff",
title: "深色/淺色互相切換",
link: "https://www.icloud.com/shortcuts/fdee53037e2144eb8ce7d28772183bef"
}, {
id: 7,
iconText: "☀️",
bgColor: "#ff4455",
title: "每日早報",
link: "https://www.icloud.com/shortcuts/4a603dfb1aed4d049c065a63543ba312"
}, {
id: 8,
iconText: "⌘",
bgColor: "#66ee99",
title: "生成WiFi二維碼",
link: "https://www.icloud.com/shortcuts/509f66e14d344faaa624bf48717eaad1"
}, {
id: 9,
iconText: "Ⓜ️",
bgColor: "#9911ff",
title: "獲取markdown格式網頁標題+鏈接[title](link)",
link: "https://www.icloud.com/shortcuts/13f9b3b1e9244c46a3ddc3dba9a35e02"
},
],
},
});
</script>
分享幾個平時經常用到的快捷指令
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章