chore: more examples
This commit is contained in:
Evan You
parent
a58da63f16
commit
46490ac1a5
63
packages/vue/examples/classic/markdown.html
Normal file
63
packages/vue/examples/classic/markdown.html
Normal file
@ -0,0 +1,63 @@
|
||||
<script src="https://unpkg.com/marked@0.3.6"></script>
|
||||
<script src="https://unpkg.com/lodash@4.16.0"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="editor">
|
||||
<textarea :value="input" @input="update"></textarea>
|
||||
<div v-html="compiledMarkdown"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
data: {
|
||||
input: '# hello'
|
||||
},
|
||||
computed: {
|
||||
compiledMarkdown() {
|
||||
return marked(this.input, { sanitize: true })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update: _.debounce(function (e) {
|
||||
this.input = e.target.value
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#editor')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #editor {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
textarea, #editor div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
border-right: 1px solid #ccc;
|
||||
resize: none;
|
||||
outline: none;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 14px;
|
||||
font-family: 'Monaco', courier, monospace;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #f66;
|
||||
}
|
||||
</style>
|
||||
127
packages/vue/examples/classic/tree.html
Normal file
127
packages/vue/examples/classic/tree.html
Normal file
@ -0,0 +1,127 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- item template -->
|
||||
<script type="text/x-template" id="item-template">
|
||||
<li>
|
||||
<div
|
||||
:class="{bold: isFolder}"
|
||||
@click="toggle"
|
||||
@dblclick="changeType">
|
||||
{{model.name}}
|
||||
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
|
||||
</div>
|
||||
<ul v-show="open" v-if="isFolder">
|
||||
<tree-item
|
||||
class="item"
|
||||
v-for="model in model.children"
|
||||
:model="model">
|
||||
</tree-item>
|
||||
<li class="add" @click="addChild">+</li>
|
||||
</ul>
|
||||
</li>
|
||||
</script>
|
||||
<!-- item script -->
|
||||
<script>
|
||||
const TreeItem = {
|
||||
name: 'TreeItem', // necessary for self-reference
|
||||
template: '#item-template',
|
||||
props: {
|
||||
model: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFolder() {
|
||||
return this.model.children &&
|
||||
this.model.children.length
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
if (this.isFolder) {
|
||||
this.open = !this.open
|
||||
}
|
||||
},
|
||||
changeType() {
|
||||
if (!this.isFolder) {
|
||||
this.model.children = []
|
||||
this.addChild()
|
||||
this.open = true
|
||||
}
|
||||
},
|
||||
addChild() {
|
||||
this.model.children.push({
|
||||
name: 'new stuff'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>(You can double click on an item to turn it into a folder.)</p>
|
||||
|
||||
<!-- the app root element -->
|
||||
<ul id="demo">
|
||||
<tree-item class="item" :model="treeData"></tree-item>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
TreeItem
|
||||
},
|
||||
data: {
|
||||
treeData: {
|
||||
name: 'My Tree',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
},
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
color: #444;
|
||||
}
|
||||
.item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
line-height: 1.5em;
|
||||
list-style-type: dot;
|
||||
}
|
||||
</style>
|
||||
63
packages/vue/examples/composition/markdown.html
Normal file
63
packages/vue/examples/composition/markdown.html
Normal file
@ -0,0 +1,63 @@
|
||||
<script src="https://unpkg.com/marked@0.3.6"></script>
|
||||
<script src="https://unpkg.com/lodash@4.16.0"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="editor">
|
||||
<textarea :value="input" @input="update"></textarea>
|
||||
<div v-html="output"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { ref, computed } = Vue
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const input = ref('# hello')
|
||||
const output = computed(() => marked(input.value, { sanitize: true }))
|
||||
const update = _.debounce(e => { input.value = e.target.value })
|
||||
|
||||
return {
|
||||
input,
|
||||
output,
|
||||
update
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#editor')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #editor {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
textarea, #editor div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
border-right: 1px solid #ccc;
|
||||
resize: none;
|
||||
outline: none;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 14px;
|
||||
font-family: 'Monaco', courier, monospace;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #f66;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { ref, reactive, computed, createApp } = Vue
|
||||
|
||||
// math helper...
|
||||
function valueToPoint (value, index, total) {
|
||||
var x = 0
|
||||
@ -24,7 +26,7 @@ const AxisLabel = {
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
point: Vue.computed(() => valueToPoint(
|
||||
point: computed(() => valueToPoint(
|
||||
+props.stat.value + 10,
|
||||
props.index,
|
||||
props.total
|
||||
@ -54,7 +56,7 @@ const Polygraph = {
|
||||
template: '#polygraph-template',
|
||||
setup(props) {
|
||||
return {
|
||||
points: Vue.computed(() => {
|
||||
points: computed(() => {
|
||||
const total = props.stats.length
|
||||
return props.stats.map((stat, i) => {
|
||||
const point = valueToPoint(stat.value, i, total)
|
||||
@ -95,8 +97,8 @@ const App = {
|
||||
Polygraph
|
||||
},
|
||||
setup() {
|
||||
const newLabel = Vue.ref('')
|
||||
const stats = Vue.reactive([
|
||||
const newLabel = ref('')
|
||||
const stats = reactive([
|
||||
{ label: 'A', value: 100 },
|
||||
{ label: 'B', value: 100 },
|
||||
{ label: 'C', value: 100 },
|
||||
@ -132,7 +134,7 @@ const App = {
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
130
packages/vue/examples/composition/tree.html
Normal file
130
packages/vue/examples/composition/tree.html
Normal file
@ -0,0 +1,130 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- item template -->
|
||||
<script type="text/x-template" id="item-template">
|
||||
<li>
|
||||
<div
|
||||
:class="{bold: isFolder}"
|
||||
@click="toggle"
|
||||
@dblclick="changeType">
|
||||
{{model.name}}
|
||||
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
|
||||
</div>
|
||||
<ul v-if="isFolder" v-show="open">
|
||||
<tree-item
|
||||
class="item"
|
||||
v-for="model in model.children"
|
||||
:model="model">
|
||||
</tree-item>
|
||||
<li class="add" @click="addChild">+</li>
|
||||
</ul>
|
||||
</li>
|
||||
</script>
|
||||
<!-- item script -->
|
||||
<script>
|
||||
const { reactive, computed, toRefs } = Vue
|
||||
|
||||
const TreeItem = {
|
||||
name: 'TreeItem', // necessary for self-reference
|
||||
template: '#item-template',
|
||||
props: {
|
||||
model: Object
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
open: false,
|
||||
isFolder: computed(() => {
|
||||
return props.model.children && props.model.children.length
|
||||
})
|
||||
})
|
||||
|
||||
function toggle() {
|
||||
state.open = !state.open
|
||||
}
|
||||
|
||||
function changeType() {
|
||||
if (!state.isFolder) {
|
||||
props.model.children = []
|
||||
addChild()
|
||||
state.open = true
|
||||
}
|
||||
}
|
||||
|
||||
function addChild() {
|
||||
props.model.children.push({ name: 'new stuff' })
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
toggle,
|
||||
changeType,
|
||||
addChild
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>(You can double click on an item to turn it into a folder.)</p>
|
||||
|
||||
<!-- the app root element -->
|
||||
<ul id="demo">
|
||||
<tree-item class="item" :model="treeData"></tree-item>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
TreeItem
|
||||
},
|
||||
data: {
|
||||
treeData: {
|
||||
name: 'My Tree',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
},
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
children: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
color: #444;
|
||||
}
|
||||
.item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
line-height: 1.5em;
|
||||
list-style-type: dot;
|
||||
}
|
||||
</style>
|
||||
85
packages/vue/examples/transition/list.html
Normal file
85
packages/vue/examples/transition/list.html
Normal file
@ -0,0 +1,85 @@
|
||||
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="app">
|
||||
<button @click="insert">insert at random index</button>
|
||||
<button @click="reset">reset</button>
|
||||
<button @click="shuffle">shuffle</button>
|
||||
<transition-group tag="ul" name="fade" class="container">
|
||||
<item v-for="item in items"
|
||||
class="item"
|
||||
:msg="item"
|
||||
:key="item"
|
||||
@rm="remove(item)">
|
||||
</item>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const getInitialItems = () => [1, 2, 3, 4, 5]
|
||||
let id = getInitialItems().length + 1
|
||||
|
||||
const Item = {
|
||||
props: ['msg'],
|
||||
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
|
||||
}
|
||||
|
||||
const App = {
|
||||
components: {
|
||||
Item
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: getInitialItems()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
insert () {
|
||||
const i = Math.round(Math.random() * this.items.length)
|
||||
this.items.splice(i, 0, id++)
|
||||
},
|
||||
reset () {
|
||||
this.items = getInitialItems()
|
||||
},
|
||||
shuffle () {
|
||||
this.items = _.shuffle(this.items)
|
||||
},
|
||||
remove (item) {
|
||||
const i = this.items.indexOf(item)
|
||||
if (i > -1) {
|
||||
this.items.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#app')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #666;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 1. declare transition */
|
||||
.fade-move, .fade-enter-active, .fade-leave-active {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
/* 2. declare enter from and leave to state */
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.01) translate(30px, 0);
|
||||
}
|
||||
/* 3. ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.fade-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
132
packages/vue/examples/transition/modal.html
Normal file
132
packages/vue/examples/transition/modal.html
Normal file
@ -0,0 +1,132 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- template for the modal component -->
|
||||
<script type="text/x-template" id="modal-template">
|
||||
<transition name="modal">
|
||||
<div v-if="show" class="modal-mask">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
|
||||
<div class="modal-header">
|
||||
<slot name="header">
|
||||
default header
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<slot name="body">
|
||||
default body
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<slot name="footer">
|
||||
default footer
|
||||
<button class="modal-default-button" @click="$emit('close')">
|
||||
OK
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</script>
|
||||
<script>
|
||||
const Modal = {
|
||||
template: '#modal-template',
|
||||
props: ['show']
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- modal container that lives outside of app root -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<!-- app -->
|
||||
<div id="app">
|
||||
<button id="show-modal" @click="showModal = true">Show Modal</button>
|
||||
<portal target="#modal-container">
|
||||
<!-- use the modal component, pass in the prop -->
|
||||
<modal :show="showModal" @close="showModal = false">
|
||||
<template #header>
|
||||
<h3>custom header</h3>
|
||||
</template>
|
||||
</modal>
|
||||
</portal>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: { Modal },
|
||||
data: {
|
||||
showModal: false
|
||||
}
|
||||
}
|
||||
Vue.createApp().mount(App, '#app')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
display: table;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 300px;
|
||||
margin: 0px auto;
|
||||
padding: 20px 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
|
||||
transition: all .3s ease;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin-top: 0;
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.modal-default-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from .modal-container,
|
||||
.modal-leave-to .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user