<template>
  <vue-run
    :js-labs="jsLabs"
    :css-labs="cssLabs"
    title="测试DEMO"
    :open="true"
    :code="code"
  />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      jsLabs: ["https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"],
      cssLabs: [
        "https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css"
      ],
      code: `<template>
  <div>
    <h1 class="title">{{title}}</h1>
    <div><el-button type="primary" @click="handleClick">点一下, 玩一年</el-button></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: "宝刀屠龙"
      };
    },
    methods: {
      handleClick () {
        this.$message.success('装备不花一分钱')
      }
    }
  };
<\/script>

<style scoped>
  .title {
    color: green;
  }
</style>`
    };
  }
};
</script>

<style>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0px;
}
</style>
